element ui 开关组件状态改变前加入弹窗判断

有个需求,开关改变状态前需要根据弹窗逻辑判断再去改变开关状态,如果不作任何处理,则会出现取消操作也会改变开关状态,有悖于逻辑。

寻找了下,有很多人是禁用开关操作,使用点击事件进行判断。这儿有一种新思路,继续使用change事件,如果取消则赋值状态改变后的相反值。

element ui 开关组件状态改变前加入弹窗判断_第1张图片

isIssueTool: function (data) {
      let tip = "";
      if (!data.enabled) {
        tip = "此操作将取消该工具的发布,是否继续?";
      } else {
        tip = "此操作将发布该工具,是否继续?";
      }
      this.$confirm(tip, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //如果继续操作则继续
        })
        .catch(() => {
          data.enabled = !data.enabled;//如果取消操作则返回已改变后的相反值
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

 

你可能感兴趣的:(element ui 开关组件状态改变前加入弹窗判断)