Vue3更快更高效的实现弹窗组件hook封装

为什么会有这个想法

在管理后台开发过程中，涉及到太多的弹窗业务弹窗，其中最多的就是“添加XX数据”，“编辑XX数据”，“查看XX详情数据”等弹窗类型最多。

这些弹窗组件的代码，很多都是相同的，例如组件状态，表单组件相关的方法...

于是，我简单地对组件进行的二次封装和，减少了一些重复的代码

要封装什么

如果是普通弹窗使用的话，直接使用组件已经足够了

但我还是一个比较爱折腾的人，我们先看看官方文档有什么可以添加的功能

...

大概看了一下，我打算封装一下功能

提供全屏操作按钮（右上角）

默认提供“确认”，“关闭”按钮

内部添加效果

封装Dialog

确定了要封装的功能之后，先来一个简单的组件。

把双向绑定处理一下，这样外部就可以直接通过直接控制弹窗了。

header

这里使用到图标库@element-plus/icons-vue

如没有安装，请执行npm install @element-plus/icons-vue

使用提供的插槽，将全屏图表和关闭图标放置到右上角中。给传递属性关闭默认图标。

弹窗的标题文字内容通过进行传递，默认为空（）

我们看看现在头部的效果（这里没传入标题，默认为）

现在这个按钮只有样式效果，还没有写上对应的功能 ~

给他们先绑定上对应的事件和指令

再点击下全屏图标看看效果怎么样

NICE 头部功能也就完成了

Footer

接下来，再处理下底部内容，默认提供两个按钮，分别是“确定”和“关闭”，这个名称也是可以通过属性修改的。

两个按钮绑定点击事件，向外发送不同的事件。

又搞定了一部分了，就剩下Content了 ~

Content

弹窗内容通过默认插槽的方式传入进来，在外层的元素上添加标签，实现加载态。

如果你想整个弹窗实现loading效果，请把v-loading移到最外层元素即可。注意不能是el-dialog元素上，否则无法实现 可能是el-dialog使用了teleport组件，导致v-loading无法正常工作。等有空研究一下 ~

试试看中间的效果

剩下一些细节处理

在组件提供了很多个属性供用户选择，但我们现在封装的组件只使用到了一小部分属性。当用户想要使用其他的属性时该怎么办？

例如使用width属性时，难道要在我们封装的组件中接收再传递给组件吗?

不不不，还有另外一种方法，还记得刚刚在做全屏操作的时候使用到的辅助函数吗

它可以获取当前组件传递进来的属性。有了这个方法之后，再配合并即可将外部传递进来的函数再传递到组件上面啦

为了避免内部传递的props被覆盖掉，需要放在最前面

在使用时，可能会给属性传递一个函数，但到了后面被内部的方法给覆盖掉了。

解决方案是在函数中，获取属性，如果类型是函数函数，先执行它。

有关于组件的封装就到这里了

封装hooks

利用再封装一下在使用组件状态的管理

useDialog

简单处理显示和加载态开关的

useDialog Demo

useDialogState 和 useDialogWithForm

useDialogState

针对开发管理后台弹窗状态封装的一个，搭配下面的使用。

useDialogWithForm

针对表单弹窗组件封装的，接收一个实例，负责控制弹窗内标题及清空表单中的校验结果，减少多余的代码 ~

useDialogWithForm Demo