前端几种危险操作确认弹框的实现方式【五月02】

KevinQ 发表于 2022/05/12 15:06:42 2022/05/12
【摘要】 问题起源一种很常见的网站优化,就是在客户进行危险操作的时候,让客户进行二次确认,从而避免因为用户一时手误,如图所示: 对话框的实现方式这种方式无须多言,实现起来逻辑并不困难,难在这种方式代码量比较大,首先需要在HTML部分创建对话框代码: <el-dialog v-if="confirmDialog" width="30vw" :visible.sync="c...

问题起源

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

image.png

对话框的实现方式

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

 <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来达到提示语的目的,如本文的的第一张图就是使用该种方式的截图。

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.png

一个简单的样例是:

<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!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。