一、概述

本文是基于 Vue3 + Element Plus，對 ElMessageBox 組件進行改寫實現(xiàn)的任務處理確認彈窗方法。核心功能是觸發(fā)彈窗，提供「取消」「處理當前任務（ONE）」「處理全部任務（ALL）」三種操作，適配異步接口調(diào)用，可直接復制到 Vue3 項目中復用，無需額外開發(fā)基礎交互，解決 Vue2 向 Vue3 遷移時 ElMessageBox 的適配問題。

二、技術棧與前置要求

2.1 技術棧

• Vue3：支持 Composition API、<script setup>語法、async/await 異步操作，適配 Vue3 虛擬 DOM 渲染機制；
• Element Plus：依賴 ElMessageBox（彈窗核心組件）、ElButton（操作按鈕）、ElIcon（圖標容器）及 Warning 圖標組件；
• Vue3 渲染函數(shù)（h 函數(shù)）：用于動態(tài)構建彈窗自定義內(nèi)容，替代 Vue2 模板寫法，適配 Vue3 組件渲染邏輯；
• 異步接口：依賴 todoApi 接口函數(shù)（需返回 Promise），用于提交任務處理請求，完成單個/全部任務的處理邏輯。

2.2 前置要求

• 項目已集成 Vue3（推薦 3.2+版本），支持 ES6+語法及 async/await 異步操作；
• Element Plus 已全局注冊或按需導入（需確保 ElMessageBox、ElButton、ElIcon、Warning 圖標已導入并注冊）；
• 已實現(xiàn) todoApi 接口，支持接收「任務 ID」和「處理類型」兩個參數(shù)，返回 Promise 對象；
• 兼容現(xiàn)代瀏覽器（Chrome、Firefox、Edge 等），支持 Vue3 虛擬 DOM 渲染及 Element Plus 組件渲染；
• 若使用<script setup>語法，需確保 Vue3 版本支持該語法（3.2+），無需額外 return 即可暴露方法。

三、完整改寫代碼

以下為 onToDo 方法完整改寫代碼（Vue3 + Element Plus 適配），可直接復制到 Vue3 組件中使用，無需額外修改（僅需適配項目接口地址）：

// 按需導入（未全局注冊Element Plus時需添加，全局注冊可省略）
// import { ElMessageBox, ElButton, ElIcon } from 'element-plus'
// import { Warning } from '@element-plus/icons-vue'
// import { todoApi } from '@/api/task' // 導入項目實際任務處理接口
/**
 * onToDo 方法（Vue3 + Element Plus ElMessageBox 改寫版）
 * 核心功能：觸發(fā)任務處理確認彈窗，提供取消、處理單個任務、處理全部任務三種操作
 * @param {String/Number} id - 當前任務唯一標識（用于接口區(qū)分具體任務）
 */
const onToDo = (id) => {
  // 調(diào)用Element Plus ElMessageBox彈窗，改寫適配Vue3渲染邏輯
  ElMessageBox({
    title: "提示", // 彈窗標題
    // 彈窗內(nèi)容：通過h函數(shù)動態(tài)構建（替代Vue2模板，適配Vue3）
    message: h("div", null, [
      // 警告圖標（Element Plus規(guī)范：需用ElIcon組件包裹具體圖標，區(qū)別于Vue2的class調(diào)用）
      h(
        ElIcon,
        {
          style:
            "color:#FCBE2D; font-size: 18px !important; margin-right: 10px; display: inline-block;",
        },
        () => h(Warning)
      ),
      // 彈窗提示文本，明確操作選項
      h(
        "span",
        { style: "vertical-align: middle;" },
        "處理當前任務(ONE)，處理全部任務(ALL)和取消?"
      ),
      // 自定義操作按鈕容器（右對齊，調(diào)整與文本的間距）
      h(
        "div",
        {
          style:
            "display: flex; justify-content: flex-end; margin-top: 10px; margin-bottom: -10px;",
        },
        [
          // 取消按鈕：僅關閉彈窗，不執(zhí)行任何業(yè)務邏輯
          h(
            ElButton,
            {
              onClick: () => ElMessageBox.close(),
            },
            "取消"
          ),
          // ONE按鈕：處理當前單個任務，異步調(diào)用接口后關閉彈窗
          h(
            ElButton,
            {
              onClick: async () => {
                await todoApi(id, "ONE"); // 調(diào)用接口，傳入當前任務ID和處理類型ONE
                ElMessageBox.close(); // 接口調(diào)用完成后，關閉彈窗
              },
            },
            "ONE"
          ),
          // ALL按鈕：處理與當前任務相關的全部任務，異步調(diào)用接口后關閉彈窗
          h(
            ElButton,
            {
              onClick: async () => {
                await todoApi(id, "ALL"); // 調(diào)用接口，傳入當前任務ID和處理類型ALL
                ElMessageBox.close(); // 接口調(diào)用完成后，關閉彈窗
              },
            },
            "ALL"
          ),
        ]
      ),
    ]),
    showCancelButton: false, // 關閉Element Plus默認取消按鈕（使用自定義取消按鈕）
    showConfirmButton: false, // 關閉Element Plus默認確認按鈕（使用自定義操作按鈕）
    callback: () => {}, // 必傳空回調(diào)，避免Element Plus拋出異常，確保彈窗正常顯示
  });
};

四、核心說明

4.1 方法參數(shù)

4.2 彈窗核心配置（改寫重點）

• message：通過 Vue3 h 函數(shù)動態(tài)構建彈窗內(nèi)容，替代 Vue2 的模板寫法，適配 Vue3 虛擬 DOM 渲染機制，可靈活組合圖標、文本、按鈕；
• 圖標渲染：Element Plus 與 Vue2 Element UI 的核心區(qū)別之一，需用 ElIcon 組件包裹 Warning 圖標，不可直接使用 class 類名調(diào)用圖標；
• 自定義按鈕：關閉 Element Plus 默認的確認/取消按鈕，通過 h 函數(shù)構建三個自定義操作按鈕，分別綁定取消、處理單個、處理全部的邏輯；
• callback：必傳空回調(diào)函數(shù)，Element Plus 的 ElMessageBox 組件在 Vue3 環(huán)境下，若不傳入 callback 會拋出異常，導致彈窗無法正常顯示，空回調(diào)不影響任何業(yè)務邏輯。

4.3 按鈕操作邏輯

• 取消：僅調(diào)用 ElMessageBox.close() 方法關閉彈窗，不執(zhí)行任何接口調(diào)用，不影響當前任務狀態(tài)；
• ONE：異步調(diào)用 todoApi(id, 'ONE')，僅處理當前傳入 id 對應的單個任務，接口調(diào)用成功（或完成）后，關閉彈窗；
• ALL：異步調(diào)用 todoApi(id, 'ALL')，處理與當前傳入 id 任務相關的全部任務（具體關聯(lián)邏輯由后端接口實現(xiàn)），接口完成后關閉彈窗。

五、使用方法

5.1 方法調(diào)用

在 Vue3 組件中（支持<script setup>或 Options API 兩種寫法），通過點擊事件調(diào)用 onToDo 方法，傳入任務 id 即可觸發(fā)彈窗：

// 示例1：<script setup>語法（Vue3.2+ 推薦，簡潔高效）
// 按需導入所需組件和接口（全局注冊可省略導入）
import { ElMessageBox, ElButton, ElIcon } from "element-plus";
import { Warning } from "@element-plus/icons-vue";
import { todoApi } from "@/api/task";
// 定義onToDo方法（完整代碼同上）
const onToDo = (id) => {
  /* 方法實現(xiàn) */
};
// 表格操作列調(diào)用（最常用場景）
// <el-table :data="taskList">
//   <el-table-column label="操作" align="center">
//     <template #default="scope">
//       <el-button type="primary" @click="onToDo(scope.row.id)">處理任務</el-button>
//     </template>
//   </el-table-column>
// </el-table>
// 示例2：Options API（兼容舊寫法，適配Vue3）
export default {
  methods: {
    // 定義onToDo方法（完整代碼同上）
    onToDo(id) {
      /* 方法實現(xiàn) */
    },
    // 其他方法中調(diào)用
    handleTaskClick(id) {
      // 可添加前置業(yè)務邏輯（如任務狀態(tài)判斷）
      this.onToDo(id); // 調(diào)用彈窗方法
    },
  },
};

五、注意事項（改寫重點）

• 組件導入：未全局注冊 Element Plus 時，必須按需導入 ElMessageBox、ElButton、ElIcon 及 Warning 圖標，否則組件無法渲染，彈窗無法顯示；
• 圖標渲染：嚴格遵循 Element Plus 規(guī)范，用 ElIcon 包裹 Warning 圖標，否則圖標無法正常顯示（這是 Vue3 改寫與 Vue2 寫法的核心區(qū)別）；
• 異步操作：ONE/ALL 按鈕的接口調(diào)用必須添加 async/await，確保接口調(diào)用完成后再關閉彈窗，避免出現(xiàn)“彈窗已關閉但接口未完成”的異常；
• 空回調(diào)：必須傳入 callback: () => {} 空回調(diào)，否則 Element Plus 會拋出異常，導致彈窗無法正常渲染；
• 樣式調(diào)整：可通過修改 h 函數(shù)中的 style 屬性，調(diào)整彈窗文本、圖標、按鈕的顏色、尺寸、間距，適配項目 UI 風格；
• 參數(shù)校驗：調(diào)用 onToDo 方法時，必須傳入有效的任務 id（唯一標識），否則接口無法區(qū)分任務，導致處理異常；
• 語法兼容：確保 Vue3 項目支持 ES6+語法，async/await 需在支持 Promise 的環(huán)境下使用，避免語法報錯；
• 接口異常：可在 async/await 中添加 try/catch 捕獲接口異常，優(yōu)化用戶體驗（如彈窗提示接口失敗，不關閉彈窗）。

六、常見問題

• 彈窗不顯示：優(yōu)先檢查 Element Plus 組件是否導入、callback 是否傳入空回調(diào)、h 函數(shù)語法是否正確（如組件名稱大小寫、參數(shù)格式）；
• 圖標不顯示：檢查 ElIcon 和 Warning 圖標是否導入，是否用 ElIcon 組件包裹 Warning，避免直接使用 class 類名調(diào)用；
• 按鈕無反應：檢查 todoApi 接口是否導入、接口調(diào)用是否添加 async/await、按鈕 onClick 事件是否正確綁定；
• 控制臺報錯：優(yōu)先檢查 callback 是否為空回調(diào)、組件導入是否完整、h 函數(shù)中組件名稱是否正確（如 ElButton 首字母大寫）；
• 接口調(diào)用失?。簷z查接口地址是否正確、參數(shù)傳遞是否與后端一致（如 taskId、handleType 字段名稱）、請求方式是否匹配；
• <script setup>中方法無法調(diào)用：確保方法直接定義，無需額外 return，組件和接口導入正確。

到此這篇關于Vue3 + Element Plus 改寫 ElMessageBox實現(xiàn)自定義按鈕效果的文章就介紹到這了,更多相關vue element plus改寫ElMessageBox自定義按鈕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論