Vue - 在启用禁用按钮之前添加延迟

Question

我有一个提交按钮，该按钮最初是禁用的（通过 v-bind:disabled），只有在所有表单输入都为非空且错误得到解决后才会启用。对于我的每个输入，我都有一个微调器，在验证输入的有效性后，它会变成一个支票或一个 x。这需要几秒钟，我希望同样的延迟适用于提交按钮的启用。目前，表格是这样的：

这是表格（哈巴狗）：

.form-group
  label Email Address
  .input-group
    input.form-control(type="email" name="emailAddress" value=profile.email
      v-model="email"
      v-validate
      data-vv-delay="1000"
      data-vv-rules="required|email"
      data-vv-as="email"
      :class="{ 'input': true, 'is-danger': errors.has('emailAddress') }"
      placeholder="eg. andres@gmail.com")
    .input-group-append
      span.input-group-text
        i.fal.fa-pulse.fa-spinner(v-if="email && emailBusy")
        i.fal.fa-check.text-green(v-if="email && !emailBusy && !isEmailTaken && !errors.has('emailAddress')")
        i.fal.fa-times.text-red(v-if="email && !emailBusy && (isEmailTaken || errors.has('emailAddress'))")
  span.text-danger.text-error(v-show="errors.has('emailAddress')") {{ errors.first('emailAddress') }}
  span.text-danger.text-error(v-if="email && email.length > 0 && isEmailTaken") Email address has already been taken
.form-group
  label Username
  .input-group
    input.form-control(type="name" name="username"
      v-model="username"
      v-validate
      data-vv-delay="1000"
      data-vv-rules="required|verify_username"
      :class="{ 'input': true, 'is-danger': errors.has('username') }"
      placeholder="eg. andres45")
    .input-group-append
      span.input-group-text
        i.fal.fa-pulse.fa-spinner(v-if="username && usernameBusy")
        i.fal.fa-check.text-green(v-if="username && !usernameBusy && !isUsernameTaken && !errors.has('username')")
        i.fal.fa-times.text-red(v-if="username && !usernameBusy && (isUsernameTaken || errors.has('username'))")
  span.text-danger.text-error(v-show="errors.has('username')") {{ errors.first('username') }}
  span.text-danger.text-error(v-if="username && username.length > 0 && isUsernameTaken") Username has already been taken
.form-group
  button.btn.btn-blue(:disabled="errors.any() || isEmailTaken || isUsernameTaken || !username || !email" type="submit")
    i.fal.fa-sign-in.mr-2
    span Complete Sign Up

vue实例：

var register = new Vue({ 
  el: '#register',
  data: {
    email: email,
    username: null,

    isUsernameTaken: false,
    usernameTimer: null,
    usernameBusy: false,

    isEmailTaken: false,
    emailTimer: null,
    emailBusy: false
  },
  methods: {
    validateEmail: function(email) {
      var self = this;
      var url = '/api/users?email=' + email;
      self.$http.get(url)
        .then(function(res){
          self.isEmailTaken = true;
          self.emailBusy = false;
        }, function(err){
          self.isEmailTaken = false;
          self.emailBusy = false;
        });
    },
    validateUsername: function(username) {
      var self = this;
      var url = '/api/users/' + username;
      self.$http.get(url)
        .then(function(res){
          self.isUsernameTaken = true;
          self.usernameBusy = false;
        }, function(err){
          self.isUsernameTaken = false;
          self.usernameBusy = false;
        });
    }
  },
  watch: {
    username: function(val) {
      var self = this;
      clearTimeout(self.usernameTimer);
      self.usernameBusy = true;
      self.usernameTimer = setTimeout(function() {
        self.validateUsername(val);
      }, 1600);
    },
    email: function(val) {
      var self = this;
      clearTimeout(self.emailTimer);
      self.emailBusy = true;
      self.emailTimer = setTimeout(function() {
        self.validateEmail(val);
      }, 1600);
    }
  }
});

Answer 1

我在移动设备上，对于格式化和缺少代码深表歉意。对我来说，我可能会设置一个变量来跟踪禁用状态，比如 var isFormComplete = false; 我会使用 vue disabled 属性来控制 button/form 状态。 :disabled=“!isFormComplete”。

然后我会在 JS 中设置一个 vue watch 甚至 computed 方法，它基本上会检查每个表单控件是否为空或者你想做的任何任意值检查，因为它是使用变量在幕后进行动态检查每个表单控件应该非常简单，当满足所有条件时，将 isFormComplete 或任何您想调用它的内容设置为 true，您的控件将被启用。

为了获得额外的乐趣和奖励积分，您可以设置一些可重复使用的通用验证代码并将其抽象为 vue 混合，并拥有一个可以重复使用的漂亮的自定义表单验证。我知道这不是一个传统的答案，但由于我是移动的，所以我觉得这比评论更深入，即使缺少代码也是如此。您也可以在验证方法中添加一个计时器，以在所有条件都满足时延迟您想要的时间，然后将禁用变量设置为 false。

Vue - 在启用禁用按钮之前添加延迟

Vue - add delay before enabling a disabled button

javascript

delay

vue.js