vue3 - 消息提示组件封装(全局)

参考 Element Plus 组件库：Message 消息提示组件

组件功能分析：

• 固定顶部显示，有三种类型：成功，错误，警告。
• 组件使用的方式不够便利，封装成工具函数方式。
• 显示消息提示时需要动画从上滑入且淡出。

定义组件：

src/components/library/xtx-message.vue

<template>
  <transition name="down">
      <div class="xtx-message" :style="style[type]" v-if="isShow">
      <!-- 上面绑定的是样式 -->
      <!-- 不同提示图标会变 -->
      <i class="iconfont" :class="style[type].icon"></i>
      <span class="text">{
   {
   message}}</span>
      </div>
  </transition>
</template>
<script>
import {
    onMounted, ref } from 'vue-demi'
export default {
   
  name: 'XtxMessage',
  props: {
   
    message: {
   
      type: String,
      default: ''
    },
    type