提交内容时防止误操作

当用户进行操作时会被触发,中断用户操作,提示用户进行输入的对话框。

调用$prompt方法即可打开消息提示,它模拟了系统的 prompt。可以用inputPattern字段自己规定匹配模式,或者用inputValidator规定校验函数,可以返回BooleanString,返回false或字符串时均表示校验未通过,同时返回的字符串相当于定义了inputErrorMessage字段。此外,可以用inputPlaceholder字段来定义输入框的占位符

提交内容时防止误操作_第1张图片提交内容时防止误操作_第2张图片提交内容时防止误操作_第3张图片

 

  this.$prompt(
        "您确定要退卡吗,操作将重置卡内充值金额与赠送金额为0元。该操作为不可逆转操作,请与会员确认无误后进行,是否继续退卡操作?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputErrorMessage: "请手动输入'退卡'",
          inputPlaceholder: "如果确认操作,请手动输入'退卡'",
          inputValidator: value => {
            if (value == null) {
              return "请手动输入'退卡'";
            } else {
              if (value.trim().length < 1) {
                return "输入不能为空";
              } else if (value !== "退卡") {
                return "请手动输入'退卡'";
              }
            }
          },
          beforeClose: (action, instance, done) => {
            if (action == "confirm") {
              return this.$http
                .post("/api/xxx/xxxxx/xxxxx", {
                  id: id
                })
                .then(({ data: res }) => {
                  if (res.code == 0) {
                    this.$message({
                      message: "操作成功",
                      type: "success",
                      duration: 1500,
                      onClose: () => {
                        done();
                        this.list();
                      }
                    });
                  } else {
                    return this.$message.error(res.msg);
                  }
                })
                .catch(() => {});
            } else {
              done();
            }
          }
        }
      ).catch(err => {});

 

 

你可能感兴趣的:(java,开发语言)