如何让 Vue.js 在 setInterval 实现倒计时的情况下保证 input 正常输入?

  • 问题再现:点击 button 开始倒计时,这时在 input 内输入的内容会被在1s后被刷新掉。
  • 需求:希望能在倒计时的同时保证 input 正常输入。

如果不使用 v-model.lazy,仅用 v-model 的话可以实现。但由于我之后要加表单验证,希望在 input 失焦后才激活验证条件,所以必须用 v-model.lazy
在使用 lazy 及不使用组件的条件下,有没有其他办法可以实现需求?Vue 有没有局部渲染的机制?

谢谢。

代码见 jsfiddle

回答:

若干年后,我也碰到了这个问题,我也想看看能不能用innerHTML,但是我这输入项太多,不好操作。我想了一个折中的办法,我在获得输入框焦点是清除定时器,失去焦点时再把定时器赋值回来,缺点就是定时不准了。不过对于我的业务影响不是很大,只能这么折中了。

<el-input
  type="text"
  placeholder="请输入ICP许可证号"
  v-model="regsStep1.icpLicenseNumber"
  @focus="_focusInput"
  @blur="_blurInput"
></el-input>
methods: {
    _focusInput() {
      clearInterval(this.timerFirstEmaill);
    },
    _blurInput() {
      this.timerFirstEmaill = setInterval(() => {
        this.veritaCode.time -= 1;
        if (this.veritaCode.time == 0) {
          clearInterval(this.timerFirstEmaill);
          this.veritaCode.showTime = false;
          this.veritaCode.time = 300;
        }
      }, 1000);
    },
}

希望后来人如果不幸踩到这个坑有更好的办法写出来,帮助后来的后来人。

回答:

既然问题已经定位到时vue渲染机制到的的问题。
那么我们针对这个问题来解决一下,
使用组件解决https://codepen.io/linong/pen…

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注