Vue2 Dialog彈窗函數式調用實踐示例

Posted on by

前言

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彈窗函數式調用的資料請關註WalkonNet其它相關文章！

推薦閱讀：