Vue2 Dialog彈窗函數式呼叫實踐範例

2023-01-16 14:00:26

前言

Dialog 對話方塊元件幾乎是每個前端專案必不可少的元件，通常是在保留當前頁面狀態並遮蔽其他使用者輸入的情況下，與使用者互動並承載相關操作。

在 BOM 的方法中，alert、prompt 都是以前用來做類似功能的方法，但是這些瀏覽器內建方法會完全停止網頁程式碼執行，對於貧乏的前端執行緒資源來說實在是過於僵硬。於是便產生了各種各樣的 Js 彈窗。

今天就來談談在前端框架 Vue 2 版本中的彈窗元件的相關實現以及我個人認為的最佳實踐。

Vue2 的彈窗常用的使用方式

對於 Vue2 的 UI 框架，坊間比較火的有 element-ui antd-vue vant-ui 等等，不過他們在彈窗的使用方法上幾乎都是一致的。下面我們以 element-ui 中的元件為例講講這些使用方式的缺點。

第一種：將彈窗寫在上下文中

這種方式不用多講，使用起來肯定是最麻煩的一種，這意味著你每次想使用這個彈窗元件都要寫一遍負責顯隱的狀態以及方法，儘量只在唯一場景裡使用，不具備複用條件。

第二種：原型上注入全域性方法

即是通過往 Vue.prototype 中注入彈窗的方法，使你可以在 vue 上下文中使用 this.$confirm 諸如此類的方法來使用他們的彈窗功能。

這種呼叫方式曾經幾乎是所有 vue2 全域性 api 的解決方法，一時間各種外掛都有了各種各樣的全域性 api。例如 vuex 的 this.$store、 EventBus 的 this.$bus 等等。

這種方式在使用上雖然非常方便，但也有如下一些缺點：

上下文汙染，一個 vue 的全域性 this 裡面，什麼東西都可以有，不論是全域性方法、還是全域性變數，都可以放在 Vue.prototype 裡面，例如前一個例子，如果複雜的彈窗需要在各種其他前端檔案內開啟，大概率也是用這種方式將彈窗開啟和關閉方法都注入到全域性 this 中使用。

型別丟失，無論你是全域性狀態管理還是事件匯流排，在使用的時候都是各種黑盒，全域性方法來自於什麼外掛、需要傳什麼引數、返回什麼東西，全然無感，只能想辦法尋找蛛絲馬跡去溯源。

只能在 vue 上下文中使用，在 vue 檔案外就無法使用了。就好比 React 無法在 React 上下文之外 setState 一樣難受。

第三種：通過依賴注入的方式

這種方式和第二種幾乎一樣，通過頂層元件 provider 出對應的函數方法，之後在子元件中 inject 進來。一樣存在著 provider 的上下文汙染，也丟失了型別，並且依舊只能在 vue 上下文中使用，靈活性一樣差。

合理的使用方式

除了上述所說的問題之外

綜合以上的缺點，我認為一個彈窗最佳的使用方式在 Vue2 中使用方式是這樣：

    <template>
        <button @click="open">開啟彈窗</button>
    </template>
    <script>
        import openDialog from 'my-dialog'
        export default {
            methods: {
                open() {
                    openDialog()
                        .then(() => {})
                        .catch(() => {})
                        .finally(() => {})
                }
            }
        }
    </script>

也可以在其他檔案中，例如：

    // api.ts
    import openDialog from 'my-dialog'
    const getUserInfo = () => {
        return fetch('/xxx/api').then(() => {
            openDialog('success')
        })
    }

功能實現

廢話不多說，直接上核心程式碼

// dialog.ts
import Vue, { ComponentInstance } from "vue";
import ConfirmDialog from "./confirm-dialog.vue";
export let index = 1000;
export const cache = new Set<string>();
export function openDialog(component: ComponentInstance) {
	const div = document.createElement("div");
	const el = document.createElement("div");
	const id = 'dialog-' + Math.random();
	div.appendChild(el);
	document.body.appendChild(div);
	const ComponentConstructor = Vue.extend(component);
	return (propsData = {}, parent = undefined) => {
		let instance = new ComponentConstructor({
			propsData,
			parent,
		}).$mount(el);
		const destroyDialog = () => {
			if (cache.has(id)) return;
			if (instance && div.parentNode) {
				cache.add(id);
				(instance as any).visible = false;
                // 延時是為了在關閉動畫執行完畢後解除安裝元件
				setTimeout(() => {
					cache.delete(id);
					instance.$destroy();
					// @ts-ignore
					instance = null;
					div.parentNode && div.parentNode.removeChild(div);
				}, 1000);
			}
		};
		// visible控制
		if ((instance as any).visible !== undefined) {
			// 支援sync/v-model
			instance.$watch("visible", (val) => {
				!val && destroyDialog();
			});
			Vue.nextTick(() => ((instance as any).visible = true));
		}
		return new Promise((resolve, reject) => {
			// emit 一個 done 事件關閉
			instance.$once("done", (data: any) => {
				destroyDialog();
				resolve(data);
			});
			// emit 一個 cancel 事件取消
			instance.$once("cancel", (data: any) => {
				destroyDialog();
				reject(data);
			});
		});
	};
}
export function confirmDialog(content: string, editable?: boolean) {
	return openDialog(ConfirmDialog as any)({ content, editable });
}

使用方式和結果可以通過下面這個例子進行檢視

stackblitz.com/edit/vitejs…

在例子中，我們可以將任意 vue 元件包裝進 openDialog Api 中，只需要在元件的 data 裡寫入一個 visible 屬性，而後續在元件方法中呼叫 this.$emits('done') 或者 this.$emits('cancel') 就可以對應 openDialog 方法返回 Promise 的 then 回撥和 catch 回撥。

可以自定義傳參、自定義內容、自定義事件，自定義返回，靈活性直接拉滿。

而且，方法不限於任何上下文，在任何檔案內都可以使用，實現了真正的函數式呼叫 Vue2 的彈窗元件。

但是這個方法確實也有那麼一點點不方便的地方，如果有掘友看得出來，可以在評論下方說說。

結語

這篇文章其實沒多少東西，甚至程式碼都是我一年多前就寫的，在受到 React hooks 的啟發後，我就覺得函數語言程式設計非常的爽，就嘗試將專案中的全域性變數都剝離 vue 上下文，包括 dialog、message 元件，之後摒棄 vuex 和 pinia 這種強綁上下文的狀態管理庫，改用 Vue.observable，就可以很方便的將業務與 UI 完全抽離。所有變數和方法都可以通過 import 追溯，更重要的是這種模式更契合 typescript，型別提示也很輕易跟上來了。

以上就是本篇文章的所有內容了,後續我會封裝 v2 和 v3 的函數式彈窗元件，並行布到 npm 上，到時候再更新連結到文章裡，更多關於Vue2 Dialog彈窗函數式呼叫的資料請關注it145.com其它相關文章！