Vue3 + Element Plus 改写 ElMessageBox实现自定义按钮效果

// 按需导入（未全局注册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 改写版）
 * 核心功能：触发任务处理确认弹窗，提供取消、处理单个任务、处理全部任务三种操作
 * @param {String/Number} id - 当前任务唯一标识（用于接口区分具体任务）
 */
const onToDo = (id) => {
  // 调用Element Plus ElMessageBox弹窗，改写适配Vue3渲染逻辑
  ElMessageBox({
    title: "提示", // 弹窗标题
    // 弹窗内容：通过h函数动态构建（替代Vue2模板，适配Vue3）
    message: h("div", null, [
      // 警告图标（Element Plus规范：需用ElIcon组件包裹具体图标，区别于Vue2的class调用）
      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)和取消?"
      ),
      // 自定义操作按钮容器（右对齐，调整与文本的间距）
      h(
        "div",
        {
          style:
            "display: flex; justify-content: flex-end; margin-top: 10px; margin-bottom: -10px;",
        },
        [
          // 取消按钮：仅关闭弹窗，不执行任何业务逻辑
          h(
            ElButton,
            {
              onClick: () => ElMessageBox.close(),
            },
            "取消"
          ),
          // ONE按钮：处理当前单个任务，异步调用接口后关闭弹窗
          h(
            ElButton,
            {
              onClick: async () => {
                await todoApi(id, "ONE"); // 调用接口，传入当前任务ID和处理类型ONE
                ElMessageBox.close(); // 接口调用完成后，关闭弹窗
              },
            },
            "ONE"
          ),
          // ALL按钮：处理与当前任务相关的全部任务，异步调用接口后关闭弹窗
          h(
            ElButton,
            {
              onClick: async () => {
                await todoApi(id, "ALL"); // 调用接口，传入当前任务ID和处理类型ALL
                ElMessageBox.close(); // 接口调用完成后，关闭弹窗
              },
            },
            "ALL"
          ),
        ]
      ),
    ]),
    showCancelButton: false, // 关闭Element Plus默认取消按钮（使用自定义取消按钮）
    showConfirmButton: false, // 关闭Element Plus默认确认按钮（使用自定义操作按钮）
    callback: () => {}, // 必传空回调，避免Element Plus抛出异常，确保弹窗正常显示
  });
};

// 示例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) => {
  /* 方法实现 */
};
// 表格操作列调用（最常用场景）
// <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) {
      /* 方法实现 */
    },
    // 其他方法中调用
    handleTaskClick(id) {
      // 可添加前置业务逻辑（如任务状态判断）
      this.onToDo(id); // 调用弹窗方法
    },
  },
};