快捷導(dǎo)航

vue+el-element中根據(jù)文件名動(dòng)態(tài)創(chuàng)建dialog的方法實(shí)踐

更新時(shí)間：2021年12月26日 10:19:36 作者：橘生淮南_

本文主要介紹了vue+el-element中根據(jù)文件名動(dòng)態(tài)創(chuàng)建dialog的方法實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

背景

在項(xiàng)目中使用對(duì)話框的通常做法是把對(duì)話框封裝成組件，在使用的地方引入，然后添加到template，使用visible.sync控制對(duì)話框的顯示/隱藏，監(jiān)聽confirm事件處理用戶點(diǎn)擊確定。如下：

 <confirm-dialog
     v-if="confirmDialogVisible"
     :title="$t(`mineData.tips.deleteDataset`)"
     :visible.sync="confirmDialogVisible"
     @confirm="confimHandler"
 ></confirm-dialog>

?在封裝的dialog內(nèi)部也需要在關(guān)閉時(shí)更新visible，確定時(shí)觸發(fā)confirm事件：

 methods: {
    close() {
        this.$emit("update:visible", false);
    },
    confirm() {
        this.close();
        this.$emit("confirm");
    }
}

這樣的做法不僅僅導(dǎo)致頁(yè)面初始化時(shí)引入所有對(duì)話框組件而影響加載速度，更頭疼的是頁(yè)面中引入了很多對(duì)話框時(shí)，會(huì)導(dǎo)致頁(yè)面很雜亂：需要為每個(gè)對(duì)話框插入一段html，為每個(gè)對(duì)話框維護(hù)一個(gè)單獨(dú)的visible變量，為每個(gè)對(duì)話框添加confirm事件監(jiān)聽...

而這些操作大部分是和業(yè)務(wù)無關(guān)的，且這些操作又是極其相似的。

那么，有沒有通過js動(dòng)態(tài)創(chuàng)建dialog的方法呢？

createDialog("confirm-dialog.vue");

就像上面這樣根據(jù)文件名即可打開對(duì)話框，不用定義visible及添加一堆html和事件回調(diào)，甚至不需要先引入對(duì)話框組件！

是不是很簡(jiǎn)單！心動(dòng)了吧？看下去吧。

實(shí)現(xiàn)

1.封裝的/utils/dialogControl.js

import Vue from 'vue'
async function createDialog (fileName, data) {
  const dialogsContext = require.context(
    '../components', // 定義查找文件的范圍
    true,
    /([a-zA-Z\-0-9]+)\.vue$/, // 定義文件名規(guī)則
    'lazy'
  )
  // 查找到傳入名字的文件并加載該文件
  let match = dialogsContext.keys().find((key) => key.includes(fileName))
  if (!match) return
  let componentContext = await dialogsContext(match)
  let temp = componentContext.default
  return new Promise(function (resolve, reject) {
    // 初始化配置參數(shù)
    let opt = {
      data
    }
    let component = Object.assign({}, temp)
    let initData = {
      visible: true
    }
    Object.assign(initData, component.data())
    opt.data && Object.assign(initData, JSON.parse(JSON.stringify(opt.data)))
    component.data = function () {
      return initData
    }
    // 創(chuàng)建構(gòu)造器創(chuàng)建實(shí)例掛載
    let DialogC = Vue.extend(component)
    let dialog = new DialogC()
    // 關(guān)閉事件
    let _onClose = dialog.$options.methods.onClose
    dialog.onClose = function () {
      resolve()
      dialog.$destroy()
      _onClose && _onClose.call(dialog)
      document.body.removeChild(dialog.$el)
    }
    // 回調(diào)事件
    let _onCallback = dialog.$options.methods.onCallback
    dialog.onCallback = function (...arg) {
      try {
        _onCallback && _onCallback()
        resolve(arg)
        dialog.$destroy()
        _onClose && _onClose.call(dialog)
        document.body.removeChild(dialog.$el)
      } catch (e) {
        console.log(e)
      }
    }
    dialog.$mount()
    // 點(diǎn)擊關(guān)閉按鈕時(shí)會(huì)改變visible
    dialog.$watch('visible', function (n, o) {
      dialog === false && dialog.onClose()
    })
    document.body.appendChild(dialog.$el)
  })
}

export { createDialog }

說明：
1.需要指定查找文件的路徑及匹配名稱的正則表達(dá)式，這樣能過濾掉一些不需要的文件

2.接收一個(gè)fileName參數(shù)用于匹配要打開的對(duì)話框文件，data參數(shù)是傳遞給對(duì)話框的數(shù)據(jù)，會(huì)合并到組件的data中

3.使用visible變量控制對(duì)話框的顯示/隱藏

4.定義了一個(gè)onClose方法用于關(guān)閉對(duì)話框，對(duì)話框中可以使用該方法進(jìn)行關(guān)閉

5.onCallback方法用于向調(diào)用對(duì)話框的父組件傳值，如點(diǎn)擊確定按鈕時(shí)向父組件傳值

2.dialog文件定義

如/components/ConfirmDialog.vue，使用visible變量控制顯示/隱藏，onClose處理關(guān)閉事件，確定按鈕的回調(diào)是onCallback（和dialogControl.js中的定義一致）。

<template>
    <el-dialog title="提示" :visible.sync="visible" width="30%">
        <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt quis
            perspiciatis fugiat molestiae provident accusantium repudiandae fugit
            minima, eaque, repellat quibusdam iste sed ad? Debitis qui praesentium
            minus incidunt esse!</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="onClose">取 消</el-button>
            <el-button type="primary" @click="onCallback(true)">確 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
  }}
</script>

?3.使用

?引入dialogControl中的createDialog方法，直接傳入文件名稱即可打開。

如果有其他的屬性，則以鍵值對(duì)的形式放入第二個(gè)參數(shù)，這些屬性會(huì)合并到對(duì)話框組件的data中，因此對(duì)話框組件中可以直接使用這些屬性。

createDialog方法得到一個(gè)promise對(duì)象，其then方法能得到confirm返回的結(jié)果。

<template>
  <div>
    <h1>This is an show page</h1>
    <el-button type="primary" @click="openDialog">打開</el-button>
  </div>
</template>

<script>
import { createDialog } from "@/utils/dialogControl";
export default {
  methods: {
    openDialog() {
      let dialog = createDialog("confirm-dialog.vue");
      dialog.then((v) => {
        if (v) {
          console.info("確定");
        }
      });
    },
  },
};
</script>

效果如下：

?

如果你還在使用文章開始的方式調(diào)用對(duì)話框，那么趕緊把這個(gè)方法用起來吧！?

參考：

https://www.freesion.com/article/43311065748/

到此這篇關(guān)于vue+el-element中根據(jù)文件名動(dòng)態(tài)創(chuàng)建dialog的方法實(shí)踐的文章就介紹到這了,更多相關(guān)el-element 動(dòng)態(tài)創(chuàng)建dialog內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: