vue2，类似于window.alert，不用在当前页面引入注册组件，通过js控制组件的显示和隐藏

vue2，类似于window.alert，不用在当前页面引入注册组件，通过js控制组件的显示和隐藏

常用于自定义全局弹窗，toast，loading等

目录结构

testComp/index.js中:

import testComp from './testComp.vue'
export default {
    install:(Vue)=>{
        let instance = Vue.extend(testComp)
        let comp = new instance()
        document.body.appendChild(comp.$mount().$el)
        Vue.prototype.$testComp = (options)=>{
            comp.option = options
        }
    }
}

testComp/testComp.vue中:

<template>
    <div class="wrap"  v-if="showComp">
        <div>
        测试
        <br/>
        传来:{{ JSON.stringify(option) }}
        <button @click="closeFn">关闭</button>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        option: {
            type: Object,
            default: ()=> {}
        }
    },
    data(){
        return {
            showComp: false
        }
    },
    watch:{
        option:{
            deep: true,
            immediate: true,
            handler(nval){
                if(nval.value){
                    this.showComp = nval.value
                }
            }
        }
    },
    methods: {
        closeFn(){
            this.showComp = false
        }
    }
}
</script>
<style scoped lang="less">
.wrap{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50,-50%);
    width: 300px;
    height: 300px;
    background: red;
}
</style>

main.js中:

import TestComp from '@/components/testComp/index'
Vue.use(TestComp)

其他页面中:

(此时不用再引入组件，直接通过js使用)

this.$testComp({value:true})