element plus 删除弹窗，使用useHook方式

M18771556987

已于 2024-03-01 09:44:18 修改

阅读量386

点赞数 2

文章标签：前端 javascript vue.js

于 2024-02-29 17:59:21 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_36878452/article/details/136377610

版权

文章介绍了如何在Element-Plus库中创建一个可定制的删除确认对话框组件，包括异步操作处理和回调函数。它扩展了ElMessageBox并提供了一个useDeleteModal函数供其他组件调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { ElMessage, ElMessageBox } from "element-plus";
import type { ElMessageBoxOptions } from "element-plus";

/*
  import { useDeleteModal } from "@/utils/useDeleteModal";
  const { deleteModal } = useDeleteModal();
  console.log(row);
  deleteModal({
    actionFn: async (done: any) => {
      await fn();
      done();
    }
  });
*/

export interface MsgBoxOptions extends ElMessageBoxOptions {
  confirmButtonText?: string;
  successTxt?: string;
  actionFn: (done: () => any) => any;
}

export function useDeleteModal() {
  const deleteModal = (msgOption: MsgBoxOptions) => {
    ElMessageBox({
      customClass: msgOption.customClass || "useDeleteModal",
      title: msgOption.title || "删除",
      message: msgOption.message || "删除该数据，是否继续？",
      showCancelButton: true,
      confirmButtonText: msgOption.confirmButtonText || "删除",
      cancelButtonText: msgOption.cancelButtonText || "取消",
      cancelButtonClass: "cancel-btn",
      confirmButtonClass: msgOption.confirmButtonClass || "delete-btn",
      type: msgOption.type || "error",
      draggable: true,
      beforeClose: async (action, instance, done) => {
        if (action === "confirm") {
          instance.confirmButtonLoading = true;
          instance.confirmButtonText = msgOption.confirmButtonText ? msgOption.confirmButtonText + "中..." : "删除中...";
          try {
            await msgOption.actionFn(done);
            ElMessage.success(msgOption.successTxt || "删除成功");
          } catch (error) {
            console.log(error);
            instance.confirmButtonText = msgOption.confirmButtonText || "删除";
          } finally {
            instance.confirmButtonLoading = false;
          }
        } else {
          done();
        }
      }
    }).catch(() => {});
  };

  return {
    deleteModal
  };
}