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掉，然后移除挂载到页面的元素