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

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

作者: 醉笙情丶浮生梦 | 来源:发表于2018-12-18 16:52 被阅读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'
        }
      }
    }
    

    相关文章

      网友评论

          本文标题:vue换绑手机点击按钮结束倒计时刷新页面

          本文链接:https://www.haomeiwen.com/subject/bfplkqtx.html