html - vue.js 验证码倒计时怎么做？
本文介绍了html - vue.js 验证码倒计时怎么做？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<div class="weui-cell ">
<div class="weui-cell__hd">
<label class="weui-label">验证码</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input code" type="number" placeholder="请输入验证码" v-model="yzm"/>
</div>
<button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="gain">获取验证码</button>
</div>
methods: {
gain: function(){
validate.verifyTel((this.phone).toString());
this.$http.post('/send_sms',{tel: this.phone},{timeout: 7000}).then((response) => {
//成功后，倒计时60秒
}, (response) => {
alert(response)
});
},
}
解决方案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<timer-btn class="btn btn-default" @click="send" :disabled="disabled" v-ref:btn :second="5"></timer-btn>
</div>
<template id="timerBtn">
<button :disabled="disabled || time > 0">
{{ text }}
</button>
</template>
<script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
<script>
'use strict';
Vue.component('timerBtn', {
template: '#timerBtn',
props: {
second: {
type: Number,
default: 60
},
disabled: {
type: Boolean,
default: false
}
},
data: function () {
return {
time: 0
}
},
methods: {
run: function () {
this.time = this.second
this.timer()
},
timer: function () {
if (this.time > 0) {
this.time--;
setTimeout(this.timer, 1000);
}
}
},
computed: {
text: function () {
return this.time > 0 ? this.time + 's 后重新获取' : '获取验证码';
}
}
});
new Vue({
el: '#app',
data: function () {
return {
disabled: false
}
},
methods: {
send: function () {
this.disabled = true;
setTimeout(this.sended, 2000);
},
sended() {
this.$refs.btn.run();
this.disabled = false;
}
}
})
</script>
</body>
</html>这篇关于html - vue.js 验证码倒计时怎么做？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
