vue换绑手机点击按钮结束倒计时刷新页面

2018-12-18  本文已影响0人  醉笙情丶浮生梦

部分 html 代码

<input type="text" class="mui-input-clear" v-model.number="newPhone" ref="input" value="" disabled="true">
<input type="text" class="mui-input-clear" placeholder="请输入验证码">
<button ref="verifyTime" @click="get">获取验证码</button>
<button @click="btn">确认修改</button>

部分 javascript

data: {
    newPhone: '176****5236',
    time: 59,
    display: false,
    msg: '',
    phoneText: '手机号',
    status: 'old',
},
methods: {
timer() {
    console.log("执行timer");
    var point = this
    point.$refs.verifyTime.disabled = true
    clearInterval(timerFunc)
    var timerFunc = setInterval(function () {
      point.$refs.verifyTime.innerHTML = point.time + "秒"
      point.time -= 1;
      if (point.time <= 0) {
        point.$refs.verifyTime.innerHTML = "获取验证码"
        point.$refs.verifyTime.disabled = false
        clearInterval(timerFunc)
        point.time = 59
      }
    }, 1000)
  },
  get() {
    if (this.status == 'old') {
      this.timer()
    } else {
        var verify = /(13|14|15|17|18|19)[0-9]{9}/
        if (verify.test(this.newPhone)) {
          ...
        }else{
          ...
        }
    }
  },
  btn() {
    console.log("点击修改");
    var point = this
    if (point.status == 'old') {
      point.status = 'new'
      point.newPhone = ''
      point.phoneText = '新手机号'
      point.$refs.verifyTime.innerHTML = "获取验证码"
      point.$refs.input.disabled = false
      //本来是想通过调用方法来结束倒计时,然而并不可行,
      //只好通过设置time值来加速倒计时
      // clearInterval(this.timer().timerFunc)
      point.time = 0
    } else {
      point.status = 'old'
    }
  }
}
上一篇下一篇

猜你喜欢

热点阅读