提交内容时防止误操作

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

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

 

  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 => {});

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值