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

Vue3封装 消息提示实例函数

实现效果

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

样式布局封装 message.vue

功能实现 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'
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

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