实现 element-ui popconfirm

最新推荐文章于 2024-08-19 22:41:16 发布

Mr.Cool

最新推荐文章于 2024-08-19 22:41:16 发布

阅读量1.1w

点赞数 2

分类专栏：前端开发文章标签： Popconfirm element-ui ant design popover

本文链接：https://blog.csdn.net/qq_39300332/article/details/100023141

版权

在中后台开发中，由于element-ui缺少popconfirm组件，作者为了解决使用popover作为确认框带来的复杂性和问题，封装了一个简易且可配置的Popconfirm组件。该组件解决了在el-table中使用时出现的显示异常问题，并结合了element-ui popover和antd popconfirm的特性，提供了丰富的属性和插槽，以提高开发效率。

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

实现原因

在中后台的业务开发中，Popconfirm(确认操作弹出框)是一个常见的需求，但 element-ui 仅提供 popover，不支持如 ant design 的 popconfirm，直接使用 popover 做确认框代码复杂的同时还带来一些意料之外的问题，因此选择封装一个简单易用但又支持灵活配置的 Popconfirm组件供业务使用，提高开发效率。

解决的问题

使用麻烦，需要写较多控制显示隐藏的代码，在列表中使用时甚至还需要给行数据额外增加 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">