//正常的书写一个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})
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
