Advertisement

使用 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)

还没有任何评论哟~