项目|Vue3封装消息提示实例函数 vue3|vue.js|组件

Vue3封装消息提示实例函数组件功能分析：

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

样式布局封装 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; } }

封装成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: '登录失败' }) }
【项目|Vue3封装消息提示实例函数】方式二：setup函数中访问组件实例对象

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