部分 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'
}
}
}