实现 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="deleteVisible = false">取消</el-button>
    <el-button size="mini" type="primary" @click="deleteFields">确定</el-button>
  </div>
  <el-button slot="reference" type="danger" icon="el-icon-delete" class="operate-btn" @click="validOperate(() => { deleteVisible = true })">删除</el-button>
</el-popover>

2. 在 el-table 中属性设置来 fixed 的 el-table-column 内使用时，会出现两个 popover，详情见 issues

效果展示

使用示例

<!-- 简单使用 -->
<Popconfirm @confirm="handleConfirm">
  <el-button>复制</el-button>
</Popconfirm>

<!-- 多配置 -->
<Popconfirm
  placement="top"
  width="220"
  type="danger"
  okType="danger"
  okText="删除"
  title="将会删除该条目下所有数据，确定要删除吗？"
  icon="el-icon-error"
  :check="checkDelete"
  @confirm="handleConfirm"
  @cancel="handleCancel"
>
  <el-button
    icon="el-icon-delete"
    type="danger"
    size="mini"
  >删除</el-button>
</Popconfirm>

Attributes（属性）

结合了element popover与antd popconfirm，支持 element-ui 的 popover 的所有属性，此外：

参数	说明	类型	可选值	默认值
visible	popconfirm是否显示	Boolean	true/false	false
title	提示的文本内容	String	-	你确定要执行此操作吗？
color	提示内容文本的颜色	String	-	-
okType	确认按钮的类型(与element-ui按钮一致)	String	primary / success / warning / danger / info / text	primary
okText	确认按钮的文本	String	-	确认
cancelType	取消按钮的类型	String	primary / success / warning / danger / info / text	-
cancelText	取消按钮的文本	String	-	确认
icon	提示的图标的类名(与element-ui icon 一致)	String	-	el-icon-info
iconColor	提示的图标的颜色	String	-	-
check	提示框显示前的校验，校验失败不显示，可以抛错误中断，也可以返回Boolean(false以外的都认为校验通过)	Function	-	() => true

Slot（插槽）

参数	说明
—	触发 Popconfirm 显示的元素
icon	Popconfirm 提示内容的图标
title	Popconfirm 提示的内容
ok	Popconfirm 点击确认区的内容
cancel	Popconfirm 点击取消区的内容

代码地址

Github: element-ui popconfirm ，期待您的 star 与 issue