vant popup 一次extend定製化組件實踐 dialog extend定製化popup組件

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掉，然後移除掛載到頁面的元素