第134期：用vue3结合hooks开发一个可以注册的二次确认弹框

web老猴子

于 2023-02-02 14:55:03 发布

阅读量479

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/web220507/article/details/128850488

版权

本文介绍了如何使用Vue3和hooks开发一个可注册的二次确认弹框，以适应不同场景的使用需求。通过组件注册，不仅可以直接传入props控制，还能通过组件API进行操作。关键点包括props到组件属性的转换和组件方法的暴露，通过`useRef`获取组件实例并注册方法。

摘要由CSDN通过智能技术生成

上次开发了一个类似popConfirm的二次确认弹框，如下面两个图：

完成开发后，准备集成到项目中时忽然发现无法集成到公司内部的组件库中，因为公司的组件库表格的操作项按钮是通过传参的方式进行配置，无法直接使用popConfirm包裹操作按钮的方式进行Dom的书写。

所以又对二次弹框进行了一次简单的开发，采用modal的方式进行开发。好处是除了可以以之前的方式，直接在组件上传入props使用，如：

 <HConfirmModal title="测试标题"  modalType="TextConfirm"  paperWork="hello-word"  :width="300"  v-model:visible="visible">
 </HConfirmModal>

也可以采用注册的方式，注册组件后，调用组件的api进行使用，如：

 <HConfirmModal@register="register" @ok="testOK" ></HConfirmModal>
 
 const [register

关注