vue3手动封装弹出框组件message的方法

<template>  <Transition name="down">    <div class="xtx-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: 'XtxMessage',  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;    }  }}.xtx-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 XtxMessage from './xtx-message.vue'// 动态创建一个DOM容器const div = document.createElement('div')div.setAttribute('class', 'xtx-meassage-container')document.body.appendChild(div)export default ({ text, type }) => {  let timer = null  // createVNode 用于创建一个虚拟节点  // 参数一支持组件  // 参数二表示传递给组件的选项  const vnode = createVNode(XtxMessage, { text, type })  // 把虚拟的节点渲染到页面的DOM中即可  // render函数的参数  // 参数一：表示需要渲染的内容（虚拟节点）  // 参数二：表示渲染的目标位置（DOM元素）  render(vnode, div)  // 希望提示信息显示1秒后消失  clearTimeout(timer)  timer = setTimeout(() => {    // 清空div中的内容    render(null, div)  }, 1000)}// $message({ text: '登录失败', type: 'error'})

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

import Message from '@/components/library/Message'setup () {    // 触发登录    const handleLogin = async () => {      // 手动进行表单验证      const flag = await target.value.validate()      if (flag) {        // 验证通过,调用接口实现登录        // 如果登录失败，就进行提示        Message({ type: 'error', text: '登录失败' })      }    }    mounted () {      this.$message({ type: 'error', text: '登录失败' })    }}

// 获取组件的实例对象：类似于之前的this    const instance = getCurrentInstance()     // 点击登录    const handleLogin = async () => {      const valid = await target.value.validate()      if (valid) {        // 表单验证通过，调用接口实现登录        // Message({ text: '登录失败', type: 'error' })        instance.proxy.$message({ text: '登录失败', type: 'error' })      }    }