vue+el-element中根據檔名動態建立dialog的方法

橘生淮南_發表於2021-12-24
Vue

背景

在專案中使用對話方塊的通常做法是把對話方塊封裝成元件，在使用的地方引入，然後新增到template，使用visible.sync控制對話方塊的顯示/隱藏，監聽confirm事件處理使用者點選確定。如下：

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

 在封裝的dialog內部也需要在關閉時更新visible，確定時觸發confirm事件：

1 methods: {
2     close() {
3         this.$emit("update:visible", false);
4     },
5     confirm() {
6         this.close();
7         this.$emit("confirm");
8     }
9 }

 這樣的做法不僅僅導致頁面初始化時引入所有對話方塊元件而影響載入速度，更頭疼的是頁面中引入了很多對話方塊時，會導致頁面很雜亂：需要為每個對話方塊插入一段html，為每個對話方塊維護一個單獨的visible變數，為每個對話方塊新增confirm事件監聽...

而這些操作大部分是和業務無關的，且這些操作又是極其相似的。

那麼，有沒有通過js動態建立dialog的方法呢？

1 createDialog("confirm-dialog.vue");

就像上面這樣根據檔名即可開啟對話方塊，不用定義visible及新增一堆html和事件回撥，甚至不需要先引入對話方塊元件！

是不是很簡單！心動了吧？看下去吧。

實現

1.封裝的/utils/dialogControl.js

 1 import Vue from 'vue'
 2 async function createDialog (fileName, data) {
 3   const dialogsContext = require.context(
 4     '../components', // 定義查詢檔案的範圍
 5     true,
 6     /([a-zA-Z\-0-9]+)\.vue$/, // 定義檔名規則
 7     'lazy'
 8   )
 9   // 查詢到傳入名字的檔案並載入該檔案
10   let match = dialogsContext.keys().find((key) => key.includes(fileName))
11   if (!match) return
12   let componentContext = await dialogsContext(match)
13   let temp = componentContext.default
14   return new Promise(function (resolve, reject) {
15     // 初始化配置引數
16     let opt = {
17       data
18     }
19     let component = Object.assign({}, temp)
20     let initData = {
21       visible: true
22     }
23     Object.assign(initData, component.data())
24     opt.data && Object.assign(initData, JSON.parse(JSON.stringify(opt.data)))
25     component.data = function () {
26       return initData
27     }
28     // 建立構造器建立例項掛載
29     let DialogC = Vue.extend(component)
30     let dialog = new DialogC()
31     // 關閉事件
32     let _onClose = dialog.$options.methods.onClose
33     dialog.onClose = function () {
34       resolve()
35       dialog.$destroy()
36       _onClose && _onClose.call(dialog)
37       document.body.removeChild(dialog.$el)
38     }
39     // 回撥事件
40     let _onCallback = dialog.$options.methods.onCallback
41     dialog.onCallback = function (...arg) {
42       try {
43         _onCallback && _onCallback()
44         resolve(arg)
45         dialog.$destroy()
46         _onClose && _onClose.call(dialog)
47         document.body.removeChild(dialog.$el)
48       } catch (e) {
49         console.log(e)
50       }
51     }
52     dialog.$mount()
53     // 點選關閉按鈕時會改變visible
54     dialog.$watch('visible', function (n, o) {
55       dialog === false && dialog.onClose()
56     })
57     document.body.appendChild(dialog.$el)
58   })
59 }
60 
61 export { createDialog }

說明：

1.需要指定查詢檔案的路徑及匹配名稱的正規表示式，這樣能過濾掉一些不需要的檔案

2.接收一個fileName引數用於匹配要開啟的對話方塊檔案，data引數是傳遞給對話方塊的資料，會合併到元件的data中

3.使用visible變數控制對話方塊的顯示/隱藏

4.定義了一個onClose方法用於關閉對話方塊，對話方塊中可以使用該方法進行關閉

5.onCallback方法用於向呼叫對話方塊的父元件傳值，如點選確定按鈕時向父元件傳值

2.dialog檔案定義

如/components/ConfirmDialog.vue，使用visible變數控制顯示/隱藏，onClose處理關閉事件，確定按鈕的回撥是onCallback（和dialogControl.js中的定義一致）。

 1 <template>
 2     <el-dialog title="提示" :visible.sync="visible" width="30%">
 3         <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt quis
 4             perspiciatis fugiat molestiae provident accusantium repudiandae fugit
 5             minima, eaque, repellat quibusdam iste sed ad? Debitis qui praesentium
 6             minus incidunt esse!</span>
 7         <span slot="footer" class="dialog-footer">
 8             <el-button @click="onClose">取 消</el-button>
 9             <el-button type="primary" @click="onCallback(true)">確 定</el-button>
10         </span>
11     </el-dialog>
12 </template>
13 
14 <script>
15 export default {
16   data () {
17     return {}
18   },
19   methods: {
20   }}
21 </script>

 3.使用

 引入dialogControl中的createDialog方法，直接傳入檔名稱即可開啟。

如果有其他的屬性，則以鍵值對的形式放入第二個引數，這些屬性會合併到對話方塊元件的data中，因此對話方塊元件中可以直接使用這些屬性。

createDialog方法得到一個promise物件，其then方法能得到confirm返回的結果。

 1 <template>
 2   <div>
 3     <h1>This is an show page</h1>
 4     <el-button type="primary" @click="openDialog">開啟</el-button>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 import { createDialog } from "@/utils/dialogControl";
10 export default {
11   methods: {
12     openDialog() {
13       let dialog = createDialog("confirm-dialog.vue");
14       dialog.then((v) => {
15         if (v) {
16           console.info("確定");
17         }
18       });
19     },
20   },
21 };
22 </script>

 效果如下：

 

如果你還在使用文章開始的方式呼叫對話方塊，那麼趕緊把這個方法用起來吧！

 

參考：

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

相關文章