快捷導(dǎo)航

Vue3 el-switch @change事件在初始化時(shí)會(huì)自動(dòng)調(diào)用問(wèn)題處理的多種方法

更新時(shí)間：2025年07月07日 09:33:28 作者：JaysonJin

本文介紹Vue3中Switch切換確認(rèn)彈窗的兩種實(shí)現(xiàn)方法：方法一通過(guò)before-change攔截器精準(zhǔn)控制（推薦）；方法二用初始化狀態(tài)標(biāo)識(shí)兼容舊項(xiàng)目,并提供統(tǒng)一封裝方案,適用于ElementPlus/NaiveUI等組件,感興趣的朋友一起看看吧

?? Vue3 實(shí)現(xiàn) Switch 狀態(tài)切換確認(rèn)彈窗的兩種方法（含完整代碼）

?? 適用于：Element Plus / Naive UI 等 Switch 開(kāi)關(guān)組件
?? 場(chǎng)景：用戶點(diǎn)擊開(kāi)關(guān)前先彈出確認(rèn)彈窗，防止誤操作

? 方法一：使用before-change攔截器（推薦）

? 原理說(shuō)明：

使用 Switch 組件的 before-change 屬性攔截切換
返回 false 阻止?fàn)顟B(tài)變更
彈出確認(rèn)框后再手動(dòng)執(zhí)行狀態(tài)修改 API

?? 示例代碼：

<el-switch
  v-model="item.status"
  :active-value="'1'"
  :inactive-value="'0'"
  :before-change="() => handleBeforeChange(item)"
/>

const handleBeforeChange = async (row: any) => {
  const text = row.status === "0" ? "啟用" : "停用";
  try {
    await proxy.$modal.confirm(`確定要${text}“${row.userName}”用戶嗎？`);
    await changeUserStatus(row.userId, row.status);
    proxy.$modal.msgSuccess(`${text}成功`);
    return true;
  } catch (err) {
    return false; // 阻止切換
  }
};

?? 注意事項(xiàng)：

before-change 要求返回 boolean | Promise<boolean>
如果 Promise 被 reject 或返回 false，則阻止?fàn)顟B(tài)切換
適合 Element Plus、Naive UI、TDesign 等支持此屬性的組件

? 方法二：利用“初始化狀態(tài)”標(biāo)識(shí)判斷（兼容性方案）

? 原理說(shuō)明：

初始化階段不執(zhí)行彈窗
后續(xù)用戶手動(dòng)點(diǎn)擊再執(zhí)行確認(rèn)邏輯
用于不支持 before-change 的組件或舊項(xiàng)目兼容

?? 示例代碼：

<el-switch
  v-model="item.status"
  :active-value="'1'"
  :inactive-value="'0'"
  @change="() => handleStatusChange(item)"
/>

let isInit = true;
const handleStatusChange = (row: any) => {
  if (isInit) {
    isInit = false;
    return;
  }
  const text = row.status === "0" ? "啟用" : "停用";
  proxy.$modal.confirm(`確定要${text}“${row.userName}”用戶嗎？`)
    .then(() => {
      return changeUserStatus(row.userId, row.status);
    })
    .then(() => {
      proxy.$modal.msgSuccess(`${text}成功`);
    })
    .catch(() => {
      // 用戶取消后回滾狀態(tài)
      row.status = row.status === "0" ? "1" : "0";
    });
};

?? 注意事項(xiàng)：

isInit 適合用于組件首次渲染跳過(guò)
缺點(diǎn)是狀態(tài)回滾不如 before-change 精準(zhǔn)，需手動(dòng)回改值

? 總結(jié)對(duì)比

方法	優(yōu)點(diǎn)	缺點(diǎn)	場(chǎng)景
? 方法一：`before-change`	原生支持、邏輯清晰、控制精準(zhǔn)	需組件支持	Vue3 + Element Plus/Naive UI 推薦
方法二：狀態(tài)標(biāo)識(shí)控制	無(wú)需組件支持、兼容性好	狀態(tài)回滾需手動(dòng)處理，首次需跳過(guò)	舊項(xiàng)目、無(wú) `before-change` 的組件

?? Bonus：統(tǒng)一封裝 Switch 彈窗邏輯

可封裝為一個(gè)公共方法，在多個(gè)組件中復(fù)用：

export const confirmSwitch = async (row, title, doChange: () => Promise<any>) => {
  try {
    await proxy.$modal.confirm(title);
    await doChange();
    proxy.$modal.msgSuccess("操作成功");
    return true;
  } catch (e) {
    return false;
  }
};

到此這篇關(guān)于Vue3 el-switch @change事件在初始化時(shí)會(huì)自動(dòng)調(diào)用問(wèn)題處理的幾種方法的文章就介紹到這了,更多相關(guān)Vue3 el-switch @change事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: