为什么会有这个想法
在管理后台开发过程中，涉及到太多的弹窗业务弹窗，其中最多的就是“添加XX数据”，“编辑XX数据”，“查看XX详情数据”等弹窗类型最多。【相关推荐：vuejs视频教程、web前端开发】
这些弹窗组件的代码，很多都是相同的，例如组件状态，表单组件相关的方法...
于是，我简单地对Dialog组件进行的二次封装和hooks，减少了一些重复的代码
要封装什么
如果是普通弹窗使用的话，直接使用el-dialog组件已经足够了
立即学习“前端免费学习笔记（深入）”；
但我还是一个比较爱折腾的人，我们先看看官方dialog文档有什么可以添加的功能
...
大概看了一下，我打算封装一下功能
- 提供全屏操作按钮（右上角）
- 默认提供“确认”，“关闭”按钮
- 内部添加
Loading效果
封装Dialog
确定了要封装的功能之后，先来一个简单的dialog组件。
把双向绑定处理一下，这样外部就可以直接通过v-model直接控制弹窗了。
header
这里使用到图标库@element-plus/icons-vue
如没有安装，请执行npm install @element-plus/icons-vue
使用el-dialog提供的header插槽，将全屏图表和关闭图标放置到右上角中。给el-dialog传递show-close属性关闭默认图标。
弹窗的标题文字内容通过props进行传递，默认为空（''）
我们看看现在头部的效果（这里没传入标题，默认为''）
现在这个按钮只有样式效果，还没有写上对应的功能 ~
给他们先绑定上对应的事件和指令
{{ props.title }}
再点击下全屏图标看看效果怎么样
NICE 头部功能也就完成了
Footer
接下来，再处理下底部内容，默认提供两个按钮，分别是“确定”和“关闭”，这个名称也是可以通过props属性修改的。
两个按钮绑定点击事件，向外发送不同的事件。
又搞定了一部分了，就剩下Content了 ~
Content
弹窗内容通过默认插槽的方式传入进来，在外层的div元素上添加v-loading标签，实现加载态。
如果你想整个弹窗实现loading效果，请把v-loading移到最外层元素即可。 注意不能是el-dialog元素上，否则无法实现 可能是el-dialog使用了teleport组件，导致v-loading无法正常工作。 等有空研究一下 ~
试试看中间的loading效果
剩下一些细节处理
在el-dialog组件提供了很多个props属性供用户选择，但我们现在封装的dialog组件只使用到了一小部分props属性。当用户想要使用其他的props属性时该怎么办？
例如使用width属性时，难道要在我们封装的组件中接收props.width再传递给
不不不，还有另外一种方法，还记得刚刚在做全屏操作的时候使用到的useAttrs辅助函数吗
它可以获取当前组件传递进来的属性。有了这个方法之后，再配合并即可将外部传递进来的函数再传递到el-dialog组件上面啦
为了避免内部传递的props被覆盖掉，
v-bind="attrs"需要放在最前面
在使用时，可能会给before-close属性传递一个函数，但到了后面被内部的handleClose方法给覆盖掉了。
解决方案是在handleClose函数中，获取attrs.['before-close']属性，如果类型是函数函数，先执行它。
const handleClose = () => {
if (
Reflect.has(attrs, "before-close") &&
typeof attrs["before-close"] === "function"
) {
attrs["before-close"]();
}
emits("close");
};有关于el-dialog组件的封装就到这里了
封装hooks
利用Vue composition Api再封装一下在使用el-dialog组件状态的管理hook
useDialog
简单处理显示和加载态开关的hook
import { ref } from "vue";
export default function useDialog() {
const visible = ref(false);
const loading = ref(false);
const openDialog = () => (visible.value = true);
const closeDialog = () => (visible.value = false);
const openLoading = () => (loading.value = true);
const closeLoading = () => (loading.value = false);
return {
visible,
loading,
openDialog,
closeDialog,
openLoading,
closeLoading,
};
}useDialog Demo
普通弹窗 DialogCmp1
useDialogState 和 useDialogWithForm
useDialogState
针对开发管理后台弹窗状态封装的一个hook，搭配下面的useDialogWithForm使用。
export enum MODE {
ADD, EDIT,
}import { ref } from "vue";
import { MODE } from "./types";
export default function useDialogState() {
const mode = ref(MODE.ADD);
const visible = ref(false);
const updateMode = (target: MODE) => {
mode.value = target;
};
return { mode, visible, updateMode };
} useDialogWithForm
针对表单弹窗组件封装的hooks，接收一个formRef实例，负责控制弹窗内标题及清空表单中的校验结果，减少多余的代码 ~
import { FormInstance } from "element-plus";
import { Ref, ref } from "vue";
import { MODE } from "./types";
import useDialogState from "./useDialogState";
export default function useDialogFn(
formInstance: Ref
) {
const { visible, mode, updateMode } = useDialogState();
const closeDialog = () => {
formInstance.value.resetFields();
visible.value = false;
};
const openDialog = (target: MODE) => {
updateMode(target);
visible.value = true;
};
return { visible, mode, openDialog, closeDialog };
} useDialogWithForm Demo
仓库地址
如果您觉得本文对您有帮助，请帮帮忙点个star
您的反馈 是我更新的动力！
