实现 element-ui popconfirm
实现原因
在中后台的业务开发中，Popconfirm(确认操作弹出框)是一个常见的需求，但 element-ui 仅提供 popover，不支持如 ant design 的 popconfirm，直接使用 popover 做确认框代码复杂的同时还带来一些意料之外的问题，因此选择封装一个简单易用但又支持灵活配置的 Popconfirm组件供业务使用，提高开发效率。
解决的问题
使用麻烦，需要写较多控制显示隐藏的代码，在列表中使用时甚至还需要给行数据额外增加 xxxVisible 属性。
<i class="el-icon-error"></i><p>你确定要删除选中的字段吗？</p>
<el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button><el-button size="mini" type="primary" @click="deleteFields">确定</el-button>
删除
在 el-table 中属性设置来 fixed 的 el-table-column 内使用时，会出现两个 popover，详情见 issues
效果展示
使用示例
<!-- 简单使用 --><Popconfirm @confirm="handleConfirm"><el-button>复制</el-button></Popconfirm><!-- 多配置 --><Popconfirmplacement="top"width="220"type="danger"okType="danger"okText="删除"title="将会删除该条目下所有数据，确定要删除吗？"icon="el-icon-error":check="checkDelete"@confirm="handleConfirm"@cancel="handleCancel"><el-buttonicon="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
妖狐艹你老母
向右看齐
左手的ㄟ右手
我就是我
亦凉
╰+攻爆jí腚メ
还没有评论，来说两句吧...