实现 element-ui popconfirm

妖狐艹你老母 2024-04-17 05:35 45阅读 0赞

#### 实现原因 ####

在中后台的业务开发中，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>

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

#### 效果展示 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzAwMzMy_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzAwMzMy_size_16_color_FFFFFF_t_70 1]

#### 使用示例 ####

<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 的所有属性，此外：

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

#### Slot（插槽） ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>—</td> 
   <td>触发 Popconfirm 显示的元素</td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td>Popconfirm 提示内容的图标</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>Popconfirm 提示的内容</td> 
  </tr> 
  <tr> 
   <td>ok</td> 
   <td>Popconfirm 点击确认区的内容</td> 
  </tr> 
  <tr> 
   <td>cancel</td> 
   <td>Popconfirm 点击取消区的内容</td> 
  </tr> 
 </tbody> 
</table>

#### 代码地址 ####

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

[issues]: https://github.com/ElemeFE/element/issues/10588
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzAwMzMy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/ebe2404dee37417fa8c6f188df78c465.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzAwMzMy_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/129ce8169d604699ac8961343f825581.png
[element popover]: https://element.eleme.io/#/zh-CN/component/popover
[antd popconfirm]: https://ant.design/components/popconfirm/
[element-ui popconfirm]: https://github.com/Xiaoleng123/utils/blob/master/popconfirm/
[issue]: https://github.com/Xiaoleng123/utils/issues