Vue3封装 Message消息提示实例函数详解

<template>  <Transition name="down">    <div class="my-message" :style="style[type]" v-show='isShow'>      <!-- 上面绑定的是样式 -->      <!-- 不同提示图标会变 -->      <i class="iconfont" :class="[style[type].icon]"></i>      <span class="text">{{text}}</span>    </div>  </Transition></template><script>import { onMounted, ref } from 'vue'export default {  name: 'myMessage',  props: {    text: {      type: String,      default: ''    },    type: {      type: String,      // warn 警告  error 错误  success 成功      default: 'warn'    }  },  setup () {    // 定义一个对象，包含三种情况的样式，对象key就是类型字符串    const style = {      warn: {        icon: 'icon-warning',        color: '#E6A23C',        backgroundColor: 'rgb(253, 246, 236)',        borderColor: 'rgb(250, 236, 216)'      },      error: {        icon: 'icon-shanchu',        color: '#F56C6C',        backgroundColor: 'rgb(254, 240, 240)',        borderColor: 'rgb(253, 226, 226)'      },      success: {        icon: 'icon-queren2',        color: '#67C23A',        backgroundColor: 'rgb(240, 249, 235)',        borderColor: 'rgb(225, 243, 216)'      }    }    // 控制动画    const isShow = ref(false)    // 组件模板渲染成功后触发    onMounted(() => {      isShow.value = true    })    return { style, isShow }  }}</script><style scoped lang="less">.down {  &-enter {    &-from {      transform: translate3d(0, -75px, 0);      opacity: 0;    }    &-active {      transition: all 0.5s;    }    &-to {      transform: none;      opacity: 1;    }  }}.my-message {  width: 300px;  height: 50px;  position: fixed;  z-index: 9999;  left: 50%;  margin-left: -150px;  top: 25px;  line-height: 50px;  padding: 0 25px;  border: 1px solid #e4e4e4;  background: #f5f5f5;  color: #999;  border-radius: 4px;  i {    margin-right: 4px;    vertical-align: middle;  }  .text {    vertical-align: middle;  }}</style>

//图标// 文本import { createVNode,render } from 'vue'import myMessage from './message.vue'// 动态创建一个DOM容器const div=document.createElement('div')div.setAttribute('class','my-message-container')document.body.appendChild(div)export default ({text,type})=>{  let timer=null  //createVNode 用于创建一个虚拟节点  // 参数1 支持组件  // 参数2 表示传递给组件的选项const vnode= createVNode(myMessage,{text, type})//把虚拟的节点渲染到页面的DOM中即可// render函数的参数//参数一：表示表示需要渲染的内容（虚拟节点）// 参数二：表示渲染的目标位置 （DOM元素）   render(vnode,div) // 希望1s后消失  clearTimeout(timer)   timer=setTimeout(()=>{     // 清空div里面的内容      render(null,div)   },1000)}// $message({ text: '登录失败', type: 'error'})

import Message from './Message.js'export default {  install(app){  // 如果你想挂载全局的属性，能够通过组件实例调用的属性 this.$message     // 扩展一个实例方法      app.config.globalProperties.$message = Message // 原型函数  }}

import Message from './message.js'setup(){  Message({ text: '登录失败', type: 'error' })}

// setup函数中访问组件实例对象     import { getCurrentInstance } from 'vue'   setup(){     const instance= getCurrentInstance()     instance.proxy.$message({ text: '登录失败', type: 'error' })   } 

this.$message({ text: '登录失败', type: 'error' })