技术分享 | 弹窗开发中，如何使用 Hook 封装 el-dialog？

弹窗是前端开发中的一种常见需求。Element UI 框架中的 el-dialog 组件提供了弹窗相关的基本功能，但在实际开发中，我们难免会遇到一些定制化需求，比如对弹窗进行二次封装以便在项目中统一管理样式和行为。

本文将分享如何使用 useDialog Hook 封装 el-dialog，实现更灵活、更易用的弹窗组件。

一、问题澄清

「将一个通用的组件应用在多个页面」是一个很常见的实际场景。

举个例子：以购买应用程序为例，用户可能在付费页面进行购买操作，也可能在浏览其他页面时触发购买需求，此时就需要弹出对话框引导用户完成购买行为。

为了实现这一功能，过去通常会采用以下步骤：

1. 封装购买组件：首先创建一个通用的购买组件，以便在不同页面和场景下复用。
2. 在付费页面渲染购买组件：将购买组件直接嵌到付费页面中。
3. 在其他页面使用 el-dialog 展示购买组件：在其他页面通过 el-dialog 控制组件的显示，利用 visible 状态变量（通常是一个 ref 响应式变量）动态控制对话框的弹出与关闭。

虽然这种方式可以满足功能需求，但随着该组件被越来越多的页面和功能所使用，维护也会愈加复杂繁琐——每增加一个使用页面，都必须重复编写控制显示/隐藏的逻辑代码。

那么，有没有更好的方法可以简化这个过程？是否可以通过某种方式，用一个单独的函数全局控制购买组件的打开和关闭，从而减少代码重复，降低维护成本？

二、关于 useDialog Hook

在 Vue 中，Hook 允许在函数式组件或者 API 中「钩入」Vue 特性。它们通常在组合式 API（Composition API）中使用，这是 Vue 提供的一套响应式和可复用逻辑功能的集合。

本文提到的 useDialog Hook 就是一个封装了 el-dialog 组件基本功能的自定义 Hook，它还可以提供附加特性以便在项目中管理和展示弹窗。

三、实现 useDialog Hook

useDialog Hook 需要达成以下目标：

1. 满足基础用法，传入 el-dialog 的基础属性以及默认slot显示的内容，导出 openDialog 和 closeDialog 函数；
2. 支持 el-dialog 的事件配置；
3. 支持默认 slot 组件的属性配置；
4. 支持 el-dialog 其他 slot 配置，例如 header 和 footer 等；
5. 在内容组件中抛出特定事件支持关闭 dialog；
6. 支持显示内容为 jsx、普通文本、Vue Component；
7. 支持在显示内容中控制是否可以关闭的回调函数，例如 beforeClose；
8. 支持显示之前钩子，例如 onBeforeOpen；
9. 支持定义和弹出时修改配置属性；
10. 支持继承 root vue 的 prototype，可以使用如 vue-i18n 的 $t 函数；
11. 支持 ts 参数提示；

（一）准备 useDialog.ts 文件实现类型定义

import type { Ref } from 'vue'
import { h, render } from 'vue'
import { ElDialog } from 'element-plus'
import type {
  ComponentInternalInstance,
} from '@vue/runtime-core'

type Content = Parameters<typeof h>[0] | string | JSX.Element
// 使用 InstanceType 获取 ElDialog 组件实