Vue3封装 消息提示实例函数

Vue3封装 消息提示实例函数

组件功能分析：

• 固定顶部显示，有三种类型：成功，错误，警告。
• 显示消息提示时需要动画从上滑入且淡出。
• 组件使用的方式不够便利，封装成工具函数方式。

样式布局封装 message.vue

封装成vue实例函数式调用

• Vue2.0使用 Vue.prototype.$message = function () {}
• vue3.0使用app.config.globalProperties挂载原型方法app.config.globalProperties.$message = Message
• 也支持直接导入函数使用 import Message from './Message.js

功能实现 message.js

//图标
// 文本
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'
// 定义指令
    defineDirective(app)
  // 如果你想挂载全局的属性，能够通过组件实例调用的属性 this.$message
      app.config.globalProperties.$message = Message // 原型函数
}

使用 ：

• 方式一：this.$message

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

• 方式二：setup函数中访问组件实例对象

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