ElMessageBox消息确认框组件在使用时如何设置第三个或多个自定义按钮

Abao

于 2024-09-10 18:15:41 发布

阅读量720

点赞数 4

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_72439307/article/details/142105720

版权

ElMessageBox自带两个按钮一个确认一个取消，当还想使用该组件还想再加个功能组件时,就需要自定义个按钮加到组件里
第二种方法可以通过编写自定义弹窗来完成,个人觉得代码量增多过于繁琐,当然也可以实现

先定义方法负责获取dom父节点，创建新的子元素加入进去，写业务逻辑并且关闭提示框

const appendChildToBtns = () => {
  // 获取div元素
  let btns: any = document.querySelector(".el-message-box__btns");
  // 创建一个新的btn元素
  let btn = document.createElement("button");
  // 为btn元素设置文本内容 添加饿了么组件按钮样式class
  btn.className = "el-button el-button--default el-button--small";
  btn.textContent = "取消";
  // 将btn元素添加到btns中
  btns.appendChild(btn);
  // 点击按钮关闭提示框
  btn.onclick = () => {
    ElMessageBox.close();
  };
};

使用例子绑定表格删除按钮事件

const click_Delete = (row: any) => {
//这里使用延迟，确保能获取到父元素dom
    setTimeout(() => {
      appendChildToBtns();
    }, 100);
    ElMessageBox.confirm("是否删除该资源组及其子节点?", "提示", {
      confirmButtonText: "删除子节点",
      cancelButtonText: "删除资源组",
      type: "warning",
//是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 Esc 键）进行区分
      distinguishCancelAndClose: true,
    })
      .then(() => {
        proxy.axios
          .delete(
            `/pcadmin/regulator-permission-manage/resource-groups/${row.id}?deleteChildren=true`
          )
          .then(({ data }: { data: any }) => {
            if (data.errorcode == 0) {
              ElMessage.success("删除子节点成功！");
              get_TreeData_List();
              get_ResourceGroup_List();
            }
          })
          .catch((err: any) => {
            console.error(err);
            ElMessage.error(err);
          });
      })
      .catch((action: Action) => {
//根据按钮执行不同业务
        if (action === "cancel") {
          proxy.axios
            .delete(
              `/pcadmin/regulator-permission-manage/resource-groups/${row.id}?deleteChildren=false`
            )
            .then(({ data }: { data: any }) => {
              if (data.errorcode == 0) {
                ElMessage.success("删除资源组成功！");
                get_TreeData_List();
                get_ResourceGroup_List();
              }
            })
            .catch((err: any) => {
              console.error(err);
              ElMessage.error(err);
            });
        }
      });
  };