1.封转组件样式 alert.vue

/**alert.vue**/

<template>
  <div class="alear" v-if="isShow">
    <h1>{{this.title}}</h1>
    <div>{{this.content}}</div>
  </div>
</template>

<script>
export default {
    props:{
        title: {
            type:String,
            default:""
        },
        content:{
            type:String,
            default:""
        },
        duration:{
            type:Number,
            default:1000
        }
    },
    data(){
        return{
            isShow:false
        }
    },
    methods: {
        show(){
            this.isShow = true;
            setTimeout(()=>{
                this.isShow = false;
                this.remove();
            },this.duration)
        }
    },
}
</script>

<style scoped>
.alear{
    display: flex;
    width: 100%;
    height: 50px;
    background-color: pink;
    top: 0;
    left: 0;
}
</style>

2.组件构造函数 createAlert.js

/**createAlert.js**/
import alert from "./alert.vue"

let vue;

function createAlert(Component, props) {
    // 组件构造函数如何获取
    // 1.Vue.extend()
    // 2.render

    const vm = new Vue({
        // h 是 createElement,返回的vNode，是虚拟dom
        // 需要挂在变成真实dom
        render: h => h(Component, { props }),
    }).$mount() // 不指定宿主元素，则会创建真实dom ,但是不会追加操作

    // 获取真实dom
    document.body.appendChild(vm.$el)

    const comp = vm.$children[0] // 此时vm 下面只有一个alert 组件,拿到组件

    comp.remove = function () {  // 挂在新方法
        document.body.removeChild(vm.$el)  // 删除真实dom
        vm.$destroy() // 销毁vm
    }

    return comp
}

export default {
  install(Vue){
     Vue.prototype.$alert=function(opthions){
        return createAlert(alert,opthions)
      } 
  }
}

3.使用弹窗

import alert from "alert"

Vue.use(alert )