Vue.component(‘timerBtn‘,{
template: ‘<button v-on:click="run" :disabled="disabled || time > 0">{{ text }}</button>‘,
props: {
second: {
type: Number,
default: 60
},
disabled: {
type: Boolean,
default: false
}
},
data:function () {
return {
time: 0
}
},
methods: {
run: function () {
this.$emit(‘run‘);
},
start: function(){
this.time = this.second;
this.timer();
},
stop: function(){
this.time = 0;
this.disabled = false;
},
setDisabled: function(val){
this.disabled = val;
},
timer: function () {
if (this.time > 0) {
this.time--;
setTimeout(this.timer, 1000);
}else{
this.disabled = false;
}
}

},
computed: {
text: function () {
return this.time > 0 ? this.time + ‘s 後重獲取‘ : ‘獲取驗證碼‘;
}
}

});

<timer-btn ref="timerbtn" class="btn btn-default" v-on:run="sendCode" ></timer-btn>

var vm = new Vue({
el:‘#app‘,
methods:{
sendCode:function(){
vm.$refs.timerbtn.setDisabled(true); //設置按鈕不可用
hz.ajaxRequest("sys/sendCode?_"+$.now(),function(data){
if(data.status){
vm.$refs.timerbtn.start(); //啟動倒計時
}else{
vm.$refs.timerbtn.stop(); //停止倒計時
}
});
},
}
});

vue 短信驗證碼