前端几种危险操作确认弹框的实现方式

发表于 更新于 本文字数： 639 阅读时长 ≈ 2 分钟

问题起源

一种很常见的网站优化，就是在客户进行危险操作的时候，让客户进行二次确认，从而避免因为用户一时手误，如图所示：

image-20220512101912447

对话框的实现方式

这种方式无须多言，实现起来逻辑并不困难，难在这种方式代码量比较大，首先需要在HTML部分创建对话框代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<el-dialog
     v-if="confirmDialog"
     width="30vw"
     :visible.sync="confirmDialog"
     title="提示"
     :destroy-on-close="true"
   >
     <div>
       <div>
         {{ confirmMsg }}
       </div>
       <div style="margin-top: 10px;font-weight: bold;">
         是否继续操作
       </div>
     </div>
     <div slot="footer">
       <el-button @click="cancel">取消</el-button>
       <el-button type="primary" @click="confirm">确定</el-button>
     </div>
   </el-dialog>

这种方式虽然工作量大，但是有一个比较好的优点是，可以比较方便的调整提示操作的格式，一种普遍存在的场景是，用户在修改信息的时候需要核对修改的数据与原数据的区别，那么使用这种方式就可以很好的实现。

JS确认框

该种方式实现起来非常简单，可以单纯的通过Javascript来达到提示语的目的，如本文的的第一张图就是使用该种方式的截图。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
this.$confirm('确认删除数据吗？', '提示', {
  confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
  // 操作确认
  // 执行删除操作以及其他业务
   this.$message({
        type: 'succuss',
    	message: '已取消删除'
    })
}).catch(() => {
      this.$message({
        type: 'info',
    	message: '已取消删除'
    })
})

el-popconfirm 气泡确认框

el-popconfirm气泡确认框，这是一个Element-UI的组件，实现完成的样式如下。

image-20220512143050848

一个简单的样例是：

1
2
3
4
5
6
7
8
9
10
11
<template>
<el-popconfirm
  confirm-button-text='好的'
  cancel-button-text='不用了'
  icon="el-icon-info"
  icon-color="red"
  title="这是一段内容确定删除吗？"
>
  <el-button slot="reference">删除</el-button>
</el-popconfirm>
</template>

el-popconfirm气泡确认框的详细文档见Element-UI官方文档。

总结

如果运营经理或者产品经理或者客户要求，能够细致的展示提示信息，而不是仅仅是一个操作确认的话，我们似乎只能选用第一种自定义对话框的方式；

相反，如果仅仅是为了避免用户误操作或者避免因为种种原因误删除数据，我们可以采用第二种JS确认框或者第三种气泡确认框，第三种需要修改html样式，第二中则只需要修改js即可。

还是那句话，具体看业务需求吧！

祝大家早日脱离CRUD Developer！