企业官网建设流程全解析

1、创建文件夹 meaasgeTips

2、在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 container=null function showMessage(options){ // 如果真实容器不存在 if(!container){ // 在页面上创建一个div container=document.createElement('div') // 把div挂在到body上 document.body.appendChild(container) } // 创建虚拟dom，messageBox和穿得参数，type，text等 const vnode=createVNode(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 :class="type" class="messageBox">{{ text }}</div> </template> <script setup> const props=defineProps({ text:String, type:String, }) const emit=defineEmits(['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); } </style>

3、在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.$message=message window.$message=message app.mount('#app')

4、使用方式

window.$message.error('请求拦截异常：'+err)