Vue-通用工具-弹窗

最近在写vue的项目，有一些组件是通用的，就单独拎出来写了。
弹窗组件

文件层级：1、tools
1.1、popup.vue
1.2、inded.js

popup.vue

<template>
  <div id="test" v-if="show" :class="flag ? 'fade-in' : 'fade-out'">
    <div :class="_class">{{_type}}{{msg}}</div>
  </div>
</template>

 <style>
#test {
  width: 200px;
  height: 50px;
  line-height: 50px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  position: fixed;
  color: white;
  font-weight: 600;
  text-align: center;
}
.success {
  background-color: rgb(21, 167, 21);
}
.error {
  background-color: rgb(199, 34, 34);
}
@keyframes fadeIn {
  0% {
    top: -50px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
@keyframes fadeOut {
  100% {
    top: -50px;
    opacity: 0;
  }
  0% {
    top: 0;
    opacity: 1;
  }
}
.fade-in {
  animation: fadeIn 0.5s;
}
.fade-out {
  animation: fadeOut 0.5s;
}
</style>

index.js

import Vue from 'vue';
import popup from './popup.vue'

const Popup = Vue.extend(popup)

export default function ({ type, msg } = { type: 1, msg: 'ok' }) {
    const app = new Popup({
        el: document.createElement("div"),
        data() {
            return {
                show: true,
                flag: true,
                type,
                msg,
            };
        },
        computed: {
            _type() {
                switch (this.type) {
                    case 1:
                        return "❌";
                    case 2:
                        return "✅";
                    default:
                        return "✅";
                }
            },
            _class() {
                switch (this.type) {
                    case 1:
                        return "error";
                    case 2:
                        return "success";
                    default:
                        return "success";
                }
            }
        }
    })
    setTimeout(() => {
        app.flag = false;
    }, 1500);
    setTimeout(() => {
        app.show = false;
    }, 2000);
    document.body.appendChild(app.$el);
};

在做数据请求时，返回值设置为type和msg