dialog
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/dialog
vue开发者都知道，vant的dialog可以js化调用
Dialog.alert({
message: '弹窗内容',
}).then(() => {
// on close
})
当有这么个需求，弹框+自定义内容，动态渲染组件，js化初始化调用。怎么整。popup能实现弹框+自定义内容。但是popup没有dialog那种js调用啊
extend定制化popup组件
Vue.extend。vue全局API。不说有的没的，直接上路
extend使用，可以记住个套路 如下：
步骤1
只管封装你的popup：正常的创建XXXPopup.vue文件，实现你的ui和逻辑
<template>
<van-popup id="HonorMedal" v-model="popupMedal" :close-on-click-overlay="false">
<!--ui布局-->
</van-popup>
</template>
<script>
import { Popup, Button } from 'vant'
export default {
name: 'HonorMedalImg',
components: {
[Popup.name]: Popup,
[Button.name]: Button
},
data() {
return {
popupMedal: true,
content: {
userName: 'name',
stage: 0
}
}
},
methods: {
close() {
this.popupMedal = false
this.no()
// mark：关键代码。杀掉清理渲染到屏幕上的组件元素
this.$destroy(true)
this.$el.parentNode.removeChild(this.$el)
},
ok() {
this.popupMedal = false
},
no() {
this.popupMedal = false
}
}
}
</script>
<style lang="scss" scoped>
</style>
步骤2
封装js调用
import Vue from 'vue'
import MedalPopup from './HonorMedal.vue'
// 返回一个实例创建的构造器，但实例构造器需要进行挂载到页面中
const ConfirmConStructor = Vue.extend(MedalPopup)
const theMedalPopup = function(content) {
return new Promise((res, rej) => {
console.log('extend 执行了')
// 返回一个promise，进行异步操作，成功时返回，失败时返回
const medalDom = new ConfirmConStructor({
el: document.createElement('div')
})
// 在body中动态创建一个div元素，之后此div将会替换成整个vue文件的内容
// 此时的medalDom通俗讲就是相当于是整个组件对象，通过对象调用属性的方法来进行组件中数据的使用
// 可以通过$el属性来访问创建的组件实例
document.body.appendChild(medalDom.$el)
// 此时进行创建组件的逻辑处理
medalDom.content = content // 将需要传入的文本内容传给组件实例
medalDom.ok = () => {
res() // 正确时返回的操作
console.log('js 执行了')
medalDom.popupMedal = false
}
medalDom.no = () => {
rej() // 失败时返回的操作
medalDom.popupMedal = false
}
})
}
// 将逻辑函数进行导出和暴露
export default theMedalPopup
步骤3
使用
import HonorMedal from './HonorMedal.js'
HonorMedal({
userName: 'name',
stage: 'index'
})
.then(() => {
// 内部操作成功
})
.catch(() => {
// 内部操作失败
})
mark： 组件元素清理。组件关闭的时候，一定要destroy掉，然后移除挂载到页面的元素
