在body中挂载一个组件
import Vue from 'vue'
/**
* 创建一个根组件
* @param Component 组件
* @param props 组件属性
*/
const createComponent = (Component, props) => {
// vue.extend()获取创建实例
const Ctor = Vue.extend(Component)
// 创建组件实例,这时得到的是虚拟dom,如何转化为真实dom
const comp = new Ctor({
options: {}
})
// 前面说到$mount就是这个作用
comp.$mount()
// 挂在在body上,这时是comp的dom
document.body.appendChild(comp.$el)
comp.remove = () => {
// 移除本身
document.body.removeChild(comp.$el)
// 释放自己所占资源
comp.$destroy()
}
return comp
}
export default createComponent
创建弹窗实例
import Info from './Info'
import createComponent from './createComponent'
/**
* 喜糖弹窗组件
*/
const Modal = {}
// 弹窗组件实例
const modalInstance = {}
const openModal = (name, Component, options) => {
if (!modalInstance[name]) {
modalInstance[name] = createComponent(Component)
}
// 在渲染完成打开,否则首次动画播放有问题
setTimeout(() => {
modalInstance[name].open(options)
})
}
// 弹窗预加载 (可在项目入口调用该函数,实现弹窗预加载)
Modal.prefetch = () => {
modalInstance.info = createComponent(Info)
}
/**
* 信息弹窗
* {
* title?: String // 弹窗标题
* content?: String // 弹窗内容
* onOk?: () => void // 确认点击回调
* okText?: String // ok按钮文本。 默认: 确认
* cancelText?: String // cancel按钮文本 默认: 取消
* containerTracker: 弹窗容器tracker(可用于弹窗曝光) 支持传递v-tracker埋点数据
* okTracker: 确认按钮tracker (可用于确认按钮点击埋点) 支持传递v-tracker埋点数据
* }
* @param options
*/
Modal.info = (options = {}) => {
openModal('info', Info, options)
}
export default Modal
onOk函数如何实现
data() {
return {
isShow: false,
options: { title: '', content: '', onOK: () => {}, onCancel: () => {} },
}
},
methods: {
// 调用show方法展示
open(options) {
this.options = { ...this.options, ...options }
this.isShow = true
},
handleOkClick() {
this.options.onOK()
this.isShow = false
},
// 消失后移除自身所占资源
hide() {
this.isShow = false
this.options.onCancel()
},
},
如何使用
Modal.info({
title: 'xxxxx:',
okText: '我知道了',
content:
'xxxx',
onOK: () => {
},
})