在vue中如何封装message组件，使外部可以通过函数的形式调用？

今日在做一个项目时，需要一个需要弹出消息提示框的功能，于是自己封装了一个 Message 组件；

1. 首先准备好你需要的封装的公共组件：

<script setup lang="ts">
import { onMounted, ref } from "vue";

const props = withDefaults(defineProps<{ type: string; message: string }>(), {
  type: "warn",
  message: "message",
});

interface IStyle {
  [key: string]: {
    icon: string;
    color: string;
    backgroundColor: string;
    borderColor: string;
  };
  warn: {
    icon: string;
    color: string;
    backgroundColor: string;
    borderColor: string;
  };
  error: {
    icon: string;
    color: string;
    backgroundColor: string;
    borderColor: string;
  };
  success: {
    icon: string;
    color: string;
    backgroundColor: string;
    borderColor: string;
  };
}

// 控制元素显示隐藏
const visible = ref(false);

// 定义一个对象，包含三种情况的样式，对象key就是类型字符串
const style: IStyle = {
  warn: {
    icon: "icon-warning",
    color: "#E6A23C",
    backgroundColor: "rgb(253, 246, 236)",
    borderColor: "rgb(250, 236, 216)",
  },
  error: {
    icon: "icon-shanchu",
    color: "#F56C6C",
    backgroundColor: "rgb(254, 240, 240)",
    borderColor: "rgb(253, 226, 226)",
  },
  success: {
    icon: "icon-queren2",
    color: "#67C23A",
    backgroundColor: "rgb(240, 249, 235)",
    borderColor: "rgb(225, 243, 216)",
  },
};

onMounted(() => {
  visible.value = true;
});
</script>

<template>
  <transition name="down">
    <div class="xgh-message" :style="style[type]" v-if="visible">
      <!-- 上面绑定的是样式 -->
      <!-- 不同提示图标会变 -->
      <i class="iconfont" :class="style[type].icon"></i>
      <span class="text">{{ message }}</span>
    </div>
  </transition>
</template>

<style scoped lang="scss">
.xgh-message {
  width: 300px;
  height: 50px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  margin-left: -150px;
  top: 25px;
  line-height: 50px;
  padding: 0 25px;
  border: 1px solid #e4e4e4;
  background: #f5f5f5;
  color: #999;
  border-radius: 4px;
  i {
    margin-right: 4px;
    vertical-align: middle;
  }
  .text {
    vertical-align: middle;
  }
}
.down {
  &-enter {
    &-from {
      transform: translate3d(0, -75px, 0);
      opacity: 0;
    }
    &-active {
      transition: all 0.5s;
    }
    &-to {
      transform: none;
      opacity: 1;
    }
  }
  &-leave {
    &-from {
      transform: none;
      opacity: 1;
    }
    &-active {
      transition: all 0.5s;
    }
    &-to {
      transform: translate3d(0, -75px, 0);
      opacity: 0;
    }
  }
}
</style>

2. 组件封装好了，那如何在外部通过函数的形式控制该组件呢？

/* 
提供一个能够显示 xgh-message 组件的函数
这个函数将来：导入直接使用，也可以挂载vue实例原型上；
import Message from "Message.ts"
Message({
    type: "success",
    message: "成功的文案"
})

this.#message({
    type: "success",
    message: "成功的文案"
})
*/
import { createVNode, render } from "vue";
import xghMessage from "./xgh-message.vue";

interface IParams {
  type: string;
  message: string;
  duration: number;
}

// 渲染组件
// 1. 导入消息提示组件；
// 2. 将消息提示组件 编译为 虚拟节点(DOM 节点)；
// 3. 准备一个装载消息提示组件的DOM容器；
// 4. 将虚拟节点渲染到容器中；
// 5. 默认3000ms后销毁组件
const div = document.createElement("div");
div.setAttribute("class", "xgh-message-container");
document.body.appendChild(div);

let timer: ReturnType<typeof setTimeout>;
export default ({ type, message, duration = 3000 }: IParams) => {
  // createVNode(组件，属性对象（props）)
  const vnode = createVNode(xghMessage, { type, message });
  // render(虚拟节点, DOM容器)
  render(vnode, div);
  timer && clearTimeout(timer);
  timer = setTimeout(() => {
    render(null, div);
  }, duration);
};

3. 这样就可以在 vue3 的 setup 语法中导入并使用了

<script setup lang="ts">
import Message from "@/baseUI/Message"

const test = () =>{
    Message({
    type: "error",
    message: "发送失败",
  });
}
</script>

<template>
<button @click="test"> 发送 </button>
</template>

<style scoped lang="scss"></style>

4. 但是如果在vue2 中使用 option API 该如何使用呢？

import Vue from 'vue'
import App from './App.vue'

// 1. 导入Message.ts
import Message from "./Message";
// 2. 挂载vue实例上，可以全局共享
vue.prototype.$message = Message;

new Vue({
  render: h => h(App)
}).$mount('#app')

5. 测试:

<script lang="ts">
export default{
    name: 'test',
    methods:{
        test() {
            this.$message({
                type: "error",
                message: "发送失败",
            })
        }
    }
}
</script>

<template>
<button @click="test"> 发送 </button>
</template>

<style scoped lang="scss"></style>