1、创建文件夹 meaasgeTips2、在meaasgeTips文件夹下创建index.js并粘贴以下代码//1、createVNode创建虚拟dom但不渲染到页面上用法 const dom createVNode(组件,props对象) //2、render 把虚拟dom渲染并挂在到真实容器上 import { createVNode,render } from vue; // 3、引入准备好的message Dom import messageBox from ./messageBox.vue; // 创建一个挂载真实dom的容器 let containernull function showMessage(options){ // 如果真实容器不存在 if(!container){ // 在页面上创建一个div containerdocument.createElement(div) // 把div挂在到body上 document.body.appendChild(container) } // 创建虚拟dommessageBox和穿得参数typetext等 const vnodecreateVNode(messageBox,{ ...options, onClose:(){ render(null,container) } }) render(vnode,container) } export const message{ success:(text)showMessage({type:success,text}), error:(text)showMessage({type:error,text}) }3、在meaasgeTips文件夹下创建messageBox.vue并粘贴以下代码template div :classtype classmessageBox{{ text }}/div /template script setup const propsdefineProps({ text:String, type:String, }) const emitdefineEmits([close]) setTimeout((){ emit(close) },2500) /script style scoped .messageBox{ position: fixed; top: 16px; left: 50%; min-width: 100px; border-radius: 16px; padding: 8px 16px; border:1px solid var(--head-text); } .success{ background: var(--tips-green-icon); } .error{ background: var(--deng-red); } /style3、在main.js中将方法挂在到全局import { createApp } from vue import router from ./router import { createPinia } from pinia import App from ./App.vue import { message } from ./components/modules/meaasgeTips/index.js const app createApp(App) app.use(router) app.use(createPinia()) app.config.globalProperties.$messagemessage window.$messagemessage app.mount(#app)4、使用方式window.$message.error(请求拦截异常err)
