一諾最近在做后臺管理系統時，遇到一個很常見但又容易被忽視的小問題：單選框切換時，用戶一不小心點錯，原有配置就沒了，數據丟失，后悔也來不及。

你是不是也遇到過類似的場景？比如切換網絡模式、切換支付方式、切換重要設置……
有時候，用戶只是想點點看，結果頁面直接切換，之前填的內容全沒了，體驗很糟糕。

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

Events

7. 常見問題

• Q：和原生 el-radio-group 用法一樣嗎？
  A：完全一樣，支持 v-model、插槽、所有屬性。
• Q：可以只對某些選項彈窗嗎？
  A：可以，配置 confirm-values 即可。
• Q：會不會影響表單校驗？
  A：不會，和普通單選框一樣。
• Q：支持響應式嗎？
  A：支持，窗口大小變化會自動適配。

如果有用，記得點贊收藏哈