使用 element-ui 实现 popconfirm 功能
发布时间
阅读量:
阅读量
实现原因分析
在中后台业务开发过程中,Popconfirm(确认操作弹出框)作为一种常见功能需求,却在 element-ui 中并未得到直接支持,其仅提供了 popover 组件,而无法实现类似 ant design 中 popconfirm 的功能。若直接使用 popover 实现确认操作,不仅会导致代码结构复杂化,还可能引发一些难以预料的问题。因此,决定对 Popconfirm 组件进行封装,使其具备简洁易用的特性,并支持多样化的配置选项,从而更好地满足业务场景需求,提升整体开发效率。
解决的问题
1.操作过程较为繁琐,需编写大量用于控制显示与隐藏的代码,尤其在列表应用中,还需为每行数据额外添加 xxxVisible 属性以实现相应功能。
<el-popover placement="bottom" width="210" v-model="deleteVisible" trigger="manual">
<div>
<i class="el-icon-error"></i>
<p>你确定要删除选中的字段吗?</p>
</div>
<div class="operate-btns">
<el-button size="mini" type="text" @click="del
全部评论 (0)
还没有任何评论哟~
