不想要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 });