Vue3编写命令式弹窗组件

import { App, createApp } from 'vue'
import CommonToast from '@/components/toast/common/CommonToast.vue'
const commonToastInstance = {} as any
let root = {} as HTMLElement
let app = {} as any
commonToastInstance.message = (data :string) => {
  app = createApp(CommonToast)
  root = document.createElement('div')
  root.setAttribute('id', 'commonToast')
  document.body.appendChild(root)
  app.provide('tips', data)
  app.mount('#commonToast')
  setTimeout(() => {
    app.unmount()
    document.body.removeChild(root)
    root = {} as HTMLElement
    app = {} as App
  }, 2000)
}

export default commonToastInstance

<template>
  <div class="common-toast">
    <div class="content">
        {{ tips }}
    div>
  div>
template>

<script lang="ts">
import { Vue, Options } from 'vue-class-component'
@Options({
  inject: ['tips']
})
export default class CommonToast extends Vue {

}
script>

<style lang="less" scoped>
  .common-toast {
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0px;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:333;
  }
  .content {
    max-width: 240px;
    border-radius: 3px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 1);
    color: #eeeeee;
    animation: toast 0.5s ease-in-out;
  }
  @keyframes toast {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
style>