vue自定义提示框组件

不想要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";//引入js

export 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 });