手滑误操作？ vue + Element UI 封装二次确认框 | 附源码_elementui 气泡确认
一诺最近在做后台管理系统时，遇到一个很常见但又容易被忽视的小问题：单选框切换时，用户一不小心点错，原有配置就没了，数据丢失，后悔也来不及。
你是不是也遇到过类似的场景？比如切换网络模式、切换支付方式、切换重要设置……
有时候，用户只是想点点看，结果页面直接切换，之前填的内容全没了，体验很糟糕。
1. 解决思路
其实，最简单的办法就是——切换前弹个确认提示，问一句“你确定要切换吗？”
功能拆解
我们想要的效果很简单：
- 用户切换单选框时，弹出确认气泡
- 用户点“确定”才真的切换
- 用户点“取消”就啥也不变
- 最好还能自定义提示文案、按钮、气泡位置
如果每个页面都手写一遍，既麻烦又容易出错。有没有现成的轮子？
有！一诺基于 ElementUI 二次封装了一个【ConfirmRadioGroup】组件，专门解决这个问题。
先看效果，如果有启发，记得点赞收藏哈
3. 组件介绍
ConfirmRadioGroup 是一个带确认提示的单选框组件，底层用的是 el-radio-group 和自研的气泡确认框。
它的特点：
- 切换选项时自动弹出确认气泡，防止误操作
- 支持自定义提示文案、按钮、图标、气泡位置
- 可以指定哪些选项需要确认
- 完全兼容原生单选框的用法，支持 v-model
- 事件丰富，方便业务扩展
4. 基本用法
假如你有一个“支付方式”切换，选项有“支付宝”和“微信支付”。切换时需要用户确认。
支付宝 微信支付 import { ConfirmRadioGroup } from \'@/components\'export default { components: { ConfirmRadioGroup }, data() { return { payType: \'alipay\' } }, methods: { onChange(val) { // 这里才真正切换 console.log(\'支付方式切换为\', val) } }}这里可以插入一张“支付方式切换弹窗”的截图
【截图3：支付方式切换弹窗】
5. 进阶玩法
5.1 只对部分选项弹窗
有时候，并不是所有切换都需要确认。比如只有切到“微信支付”才需要提示。
支付宝 微信支付5.2 自定义按钮和图标
你可以自定义按钮文案、颜色、图标样式，让提示更贴合业务。
激活 停用5.3 气泡位置随心选
气泡默认在下方（bottom），也可以放到上、左、右。
左侧 右侧5.4 彻底关闭确认功能
有些场景你不想弹窗，直接加个 :enable-confirm=\"false\" 就行。
模式1 模式2
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 })
7. 常见问题
- Q：和原生 el-radio-group 用法一样吗？
A：完全一样，支持 v-model、插槽、所有属性。 - Q：可以只对某些选项弹窗吗？
A：可以，配置confirm-values即可。 - Q：会不会影响表单校验？
A：不会，和普通单选框一样。 - Q：支持响应式吗？
A：支持，窗口大小变化会自动适配。
如果有用，记得点赞收藏哈
