//正常的书写一个vue组件
<template>
    <div class="">
    </div>
</template>

<script>

export default {
    name: 'SubscriptionService',
    props: {
        show: {
            type: Boolean,
            default: false
        },
        shopId: { type: Number },
        whetherAllowShutdown: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            
        }
    }
}
</script>

<style lang="scss" scoped>
</style>

//vue组件同级下书写一个js文件

//此处引入vue组件
import SubscriptionService from './index.vue'

const SubscriptionServiceModal = {
    install(Vue) {
        if (typeof window !== 'undefined' && window.Vue) {
            Vue = window.Vue
        }
        Vue.component('SubscriptionService', SubscriptionService)

        function handle(type, shopId) {
            let newAuth = null
            // 实例化
            let instance = Vue.extend({
                render(h, c) {
                    let props = {
                        ['show']: type === 'show' ? true : false,
                        shopId
                    }
                    let on = {
                        closeDialog: value => {
                            this.show = false
                            document.body.removeChild(this.$el) //从body中移除dom
                            newAuth.$destroy()
                        }
                    }
                    return h('SubscriptionService', { props, on })
                },
                data() {
                    return {
                        show: false
                    }
                }
            })
            newAuth = new instance()
            let vm = newAuth.$mount() //手动地挂载一个未挂载的实例
            let el = vm.$el
            document.body.appendChild(el) // 把生成的提示的dom插入body中
            vm.show = type === 'show' ? true : false
        }

        // 挂载到vue原型上
        Vue.prototype.$subscriptionServiceModal = {
            show(data) {
                const { shopId } = data
                if (!shopId) return
                handle('show', shopId)
            }
        }
    }
}
export default SubscriptionServiceModal

//vue main.js文件

//引入之前书写的js文件
import SubscriptionServiceModal from '../subscriptionServiceModal'

Vue.use(SubscriptionServiceModal) // 订购服务弹窗

//在js文件中使用
import Vue from 'vue'

Vue.prototype.$subscriptionServiceModal.show({ shopId})