Vue3.0实现自定义Message提示框

效果显示

有话要说

学习vue3.0的时候想到了，能不能自己写一个自定义的类似于element ui的this.$message的消息提示框，网上有很多是基于vue2.0的自定义提示框，那么我就来搞一个3.0版本的吧。

实现步骤

1. 创建MessageMain.vue

<template>
  <Transition name="down">
    <div class="message" :style="style[type]" v-show="visible">
      <!-- 上面绑定的是样式 -->
      <!-- 不同提示图标会变 -->
      <i class="iconfont" :class="[style[type].icon]"></i>
      <span class="text">{
   {
    text }}</span>
    </div>
  </Transition>
</template>
<script>
import {
    onMounted, ref } from "vue";
export default {
   
  name: "MessageMain",
  props: {
   
    text: {
   
      type: String,
      default: "",
    },
    type: {
   
      type: String,
      // warn 警告  error 错误  success 成功
      default: "warn",
    },
  },
  setup() {
   
    // 定义一个对象，包含三种情况的样式，对象key就是类型字符串
    const style = {
   
      warn: {
   
        icon: "icon-error",
        color: "#fff",
        backgroundColor: "rgb(255, 126, 14)",
        borderColor: "rgb(250, 236