vue 验证码倒计时(jq vs vue)

短信验证 现在是市面上比较流行的一种验证方式,最近公司的项目有涉及到故整体如下


?
JQ版本
?
js
sendMsm: function(wait, objectb) {
var time = wait;
if(time == 0) {
$(objectb).removeAttr("disabled");
$(objectb).text("获取验证码");
$(objectb).removeClass('hidden');
$(objectb).next().addClass('hidden');
time = wait;
} else {
$(objectb).attr("disabled", true);
$(objectb).addClass('hidden');
$(objectb).next().removeClass('hidden').text(time + " s 后重发");
time--;
setTimeout(function() {
qdcms.sendMsm(time, objectb);
}, 1000)
}
}




html
<a class="btn btn-black" onclick="qdcms.getcode(60,this)">获取验证码</a>
<span class="btn btn-black disabled hidden"></span>
css
VBAdmin-UI
?
预览地址:https://www.tfstock.com.cn/?点击注册按钮
?
?
Vue 实现
?
template
<template>
<button class="timerout" :disabled="disabled || time > 0" @click='run'>
{{ text }}
</button>
</template>
script
<script>
export default {
name: 'timerbtn',
props: {
second: {
type: Number,
default: 60
},
disabled: {
type: Boolean,
default: false
}
},
data: function() {
return {
time: 0
}
},
methods: {
run() {
this.time = this.second;
this.timer();
},
timer() {
if(this.time > 0) {
this.time--;
setTimeout(this.timer, 1000);
}
}
},
computed: {
text() {
return this.time > 0 ? this.time + 's 后重新获取' : '点击获取验证码';
}
},
mounted: function() {

}

}
</script>

style
css ?VBAdmin-UI
<style lang="less">
@import (reference) "../../../assets/lib/css.less";
.timerout:disabled {
&,
&:hover,
&:focus {
.bgc(@cbla);
color: @cwh;
}
}
</style>

?
下载地址如下:

0 个评论

要回复文章请先登录注册