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

目录

• Vue3封装 消息提示实例函数
• 样式布局封装 message.vue
• 功能实现 message.js
• 注册 自定义指令
• 使用 ：
• 总结

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' })

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！