当前位置：首页 > news >正文

手滑误操作？ vue + Element UI 封装二次确认框 | 附源码

news 2025/7/15 11:52:06

一诺最近在做后台管理系统时，遇到一个很常见但又容易被忽视的小问题：单选框切换时，用户一不小心点错，原有配置就没了，数据丢失，后悔也来不及。

你是不是也遇到过类似的场景？比如切换网络模式、切换支付方式、切换重要设置……
有时候，用户只是想点点看，结果页面直接切换，之前填的内容全没了，体验很糟糕。

1. 解决思路

其实，最简单的办法就是——切换前弹个确认提示，问一句“你确定要切换吗？”

功能拆解

我们想要的效果很简单：

用户切换单选框时，弹出确认气泡
用户点“确定”才真的切换
用户点“取消”就啥也不变
最好还能自定义提示文案、按钮、气泡位置

如果每个页面都手写一遍，既麻烦又容易出错。有没有现成的轮子？

有！一诺基于 ElementUI 二次封装了一个【ConfirmRadioGroup】组件，专门解决这个问题。

先看效果，如果有启发，记得点赞收藏哈

3. 组件介绍

ConfirmRadioGroup 是一个带确认提示的单选框组件，底层用的是 el-radio-group 和自研的气泡确认框。
它的特点：

切换选项时自动弹出确认气泡，防止误操作
支持自定义提示文案、按钮、图标、气泡位置
可以指定哪些选项需要确认
完全兼容原生单选框的用法，支持 v-model
事件丰富，方便业务扩展

4. 基本用法

假如你有一个“支付方式”切换，选项有“支付宝”和“微信支付”。切换时需要用户确认。

<template><ConfirmRadioGroupv-model="payType"confirm-title="切换支付方式会清空已填写信息，确定要切换吗？"@change="onChange"><el-radio label="alipay">支付宝</el-radio><el-radio label="wechat">微信支付</el-radio></ConfirmRadioGroup>
</template>
<script>
import { ConfirmRadioGroup } from '@/components'export default {components: { ConfirmRadioGroup },data() {return { payType: 'alipay' }},methods: {onChange(val) {// 这里才真正切换console.log('支付方式切换为', val)}}
}
</script>

这里可以插入一张“支付方式切换弹窗”的截图
【截图3：支付方式切换弹窗】

5. 进阶玩法

5.1 只对部分选项弹窗

有时候，并不是所有切换都需要确认。比如只有切到“微信支付”才需要提示。

<ConfirmRadioGroupv-model="payType":confirm-values="['wechat']"confirm-title="切换到微信支付会清空支付宝信息，是否继续？"
><el-radio label="alipay">支付宝</el-radio><el-radio label="wechat">微信支付</el-radio>
</ConfirmRadioGroup>

5.2 自定义按钮和图标

你可以自定义按钮文案、颜色、图标样式，让提示更贴合业务。

<ConfirmRadioGroupv-model="status"confirm-title="确认要切换状态吗？"confirm-button-text="立即切换"confirm-button-type="danger"cancel-button-text="我再想想"confirm-icon-class="el-icon-delete"confirm-icon-color="#F56C6C":confirm-icon-style="{ fontSize: '18px', fontWeight: 'bold' }"
><el-radio label="active">激活</el-radio><el-radio label="inactive">停用</el-radio>
</ConfirmRadioGroup>

5.3 气泡位置随心选

气泡默认在下方（bottom），也可以放到上、左、右。

<ConfirmRadioGroupv-model="position"placement="right"confirm-title="切换位置会重新计算布局"
><el-radio label="left">左侧</el-radio><el-radio label="right">右侧</el-radio>
</ConfirmRadioGroup>

5.4 彻底关闭确认功能

有些场景你不想弹窗，直接加个 :enable-confirm="false" 就行。

<ConfirmRadioGroup v-model="mode" :enable-confirm="false"><el-radio label="mode1">模式1</el-radio><el-radio label="mode2">模式2</el-radio>
</ConfirmRadioGroup>

6.API事件说明

Props

参数	说明	类型	默认值
value / v-model	绑定值	string / number / boolean	''
disabled	是否禁用	boolean	false
size	尺寸	string	'medium'
text-color	激活时的文本颜色	string	'#ffffff'
fill	激活时的填充色和边框色	string	'#409EFF'
enable-confirm	是否启用确认提示	boolean	true
confirm-title	确认提示标题	string	'切换选项后将清空当前相关配置，确认继续操作吗？'
confirm-button-text	确认按钮文本	string	'确定'
cancel-button-text	取消按钮文本	string	'取消'
confirm-button-type	确认按钮类型	string	'primary'
confirm-icon-class	确认图标的 class 类名	string	'sec-icon-warning'
confirm-icon-color	确认图标颜色	string	'#E6A23C'
confirm-icon-style	确认图标的自定义样式	object	{}
placement	气泡位置	string	'top'
confirm-values	需要确认的值数组	array	[]
confirm-on-same	相同值时是否也显示确认	boolean	false

Events

事件名	说明	参数
change	选项改变时触发	(value)
confirm	确认切换时触发	({ oldValue, newValue })
cancel	取消切换时触发	({ oldValue, cancelValue })