不想要elementui的消息提示，自定义一个组件系统统一使用
一、写页面
vue （我放的目录是src/plugins/message.vue）（这里面使用elementui 里面icon 需要单独引入）

<template><Transition name="down"><div><!-- 成功显示 --><div class="message_block message_sussess" v-if="type=='success'"><div class="message_icon sussess_text"><el-icon><SuccessFilled /></el-icon><i class="iconfont icon-warning"></i></div><div class="message_text sussess_text">{{text}}</div></div><!-- 失败显示 --><div class="message_block message_error" v-else><div class="message_icon error_text"><el-icon><Close /></el-icon><i class="iconfont icon-warning"></i></div><div class="message_text error_text">{{text}}</div></div></div></Transition>
</template>
<script>
import { ref } from 'vue'
import { ArrowDown, SuccessFilled, CloseBold, Close } from "@element-plus/icons-vue";
export default {name: 'Message',props: {type: {type: String,default: 'success'},text: {type: String,default: '保存成功'}},components: {ArrowDown, SuccessFilled, CloseBold, Close},
}
</script>
<style scoped lang="scss">
.down {&-enter {&-from {transform: translate3d(0, -75px, 0);opacity: 0;}&-active {transition: all 0.5s;}&-to {transform: none;opacity: 1;}}
}
.message_block {width: 194px;min-height: 191px;height: auto;position: fixed;z-index: 9999;left: 53%;margin-left: -150px;top: 20%;padding: 0 25px;border: 1px solid #e4e4e4;border-radius: 8px 8px 8px 8px;padding-bottom: 10px;i {margin-right: 4px;vertical-align: middle;}.text {vertical-align: middle;}.message_text {font-size: 18px;text-align: center;overflow: hidden;margin-top: 16px;}.message_icon {text-align: center;margin-top: 29px;height: 70px;svg {width: 70px;height: 70px;}}
}.message_sussess {background: linear-gradient(180deg, #ecfff4 0%, #ffffff 75%);box-shadow: 0px 0px 20px 0px rgba(93, 134, 116, 0.2);.sussess_text {color: #2ec081;}
}
.message_error {background: linear-gradient(180deg, #f193a4 0%, #ffffff 75%);box-shadow: 0px 0px 20px 0px rgba(204, 36, 36, 0.2);.error_text {color: red;}
}
</style>

js： (目录：src/plugins/message.js)

// 提供一个能够显示Message组件的函数
// 这个函数将来：导入直接使用，也可以挂载在vue实例原型上import { createVNode, render } from "vue";
import MessageVue from "./message.vue";// DOM容器
const div = document.createElement("div");
div.setAttribute("class", "xtx-msssage-container");
document.body.appendChild(div);// 定时器标识
let timer = null;
let showTime = 3000;
export default ({ type, text, time }) => {// 渲染组件// 1. 导入消息提示组件// 2. 将消息提示组件编译为虚拟节点(dom节点)// createVNode(组件,属性对象（props）)const vnode = createVNode(MessageVue, { type, text, time });if (time) {showTime = time;}// 3. 准备一个装载消息提示组件的DOM容器// 4. 将虚拟节点渲染再容器中// render(虚拟节点,DOM容器)render(vnode, div);// 5. 3s后销毁组件clearTimeout(timer);timer = setTimeout(() => {render(null, div);}, showTime);
};

二、注册
① 挂在全局
src/plugins/index.js

import tab from "./tab";
import auth from "./auth";
import cache from "./cache";
import modal from "./modal";
import download from "./download";
import messageVue from "./message";//引入jsexport default function installPlugins(app) {// 页签操作app.config.globalProperties.$tab = tab;// 认证对象app.config.globalProperties.$auth = auth;// 缓存对象app.config.globalProperties.$cache = cache;// 模态框对象app.config.globalProperties.$modal = modal;// 下载文件app.config.globalProperties.$download = download;app.config.globalProperties.$messageVue = messageVue;//设置名称
}

（检查main.js 是否引入使用plugins/index.js、没有引入记得加入这两句）

import plugins from "./plugins"; // plugins
app.use(plugins);

三、使用
① vue文件使用

const { proxy } = getCurrentInstance();
//完成使用 type值有error和success默认success。time默认30000 这两个都选传
proxy.$messageVue({  text: '保存成功' })
//完成使用：
proxy.$messageVue({ type: 'error', text: res.message,time:2000 })

② js使用
我们是接口返回报错也统一使用这个提示弹窗
所以在request.js里面

import messageVue from "@/plugins/message.js";
//使用
messageVue({ type: "error", text: msg });