vue创建弹窗实例

src下创建一个utils文件，下面放弹窗实例create.js：

//创建指定的组件实例并挂载到body上
import Vue from 'vue'
export default function create(Component,props){
    //0.先创建vue实例
    const vm = new Vue({
        render(h) {//提供一个h函数(createElement()别名),可以渲染VNode(虚拟dom)
            return h(Component,{props})
        }
    }).$mount();//不能直接挂在到body上，会报错

    //1.上面的vm帮我们创建组件实例
    //2.通过$children获取该组件的实例
    const comp = vm.$children[0];
    //3. 追加至body,comp是实例但不是dom,所以要用$el获取渲染出来的dom节点
    document.body.appendChild(comp.$el);

    //4.清理函数,创建的弹窗在关掉后需要清除,防止内存泄露
    comp.remove = () => {
        document.body.removeChild(vm.$el);
        vm.$destroy();
    }

    //5.返回组件实例
    return comp;
}

components下创建vue文件，简单写一下样式：

<template>
    <div v-if="isShow" class="model">
        <h3>{{title}}</h3>
        <p>{{message}}</p>
    </div>
</template>
    
<script>
export default {
    props:{
        title:{
            type:String,
            default: ''
        },
        message:{
            type:String,
            default: ''
        },
        duration: {
            type: Number,
            default: ''
        }
    },
    data(){
        return {
            isShow: false
        }
    },
    methods:{
        show(){
            this.isShow = true;
            setTimeout(() => {
                this.hide();
            }, this.duration);
        },
        hide(){
            this.isShow = false;
            this.remove();
        }
    }
}
</script>
 
<style>
.model{
    width: 200px;
    height: 100px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -50px;
    background: #fff;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
</style>

页面中使用：

//导入
import Notice from "../Notice"
import create from "@/utils/create"

//创建弹窗实例
let notice;

//使用的时候直接用
notice = create(Notice, {
      title: 'xxx',
      message: '登录~~~',
      duration: 1000
})

长这样：