Vue3封装|Vue3封装 Message消息提示实例函数详解 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

.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; }}

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