vue短信验证码倒计时
我也不知道关于前端的短信验证码有什么插件、模板之类的,项目需求,就搞了一个,注释已标,再调用接口的话就自己处理吧。直接上代码<template><div><button v-show="Verification" @click="handleClick">点击获取验证码&am
·
我也不知道关于前端的短信验证码有什么插件、模板之类的,项目需求,就搞了一个,注释已标,再调用接口的话就自己处理吧。直接上代码
<template>
<div>
<button v-show="Verification" @click="handleClick">点击获取验证码</button>
<button v-show="!Verification"><span>{{timer}}</span>秒后重新获取</button>
</div>
</template>
<script>
export default {
data(){
return{
Verification:true, //通过v-show控制显示获取还是倒计时
timer:60 //定义初始时间为60s
}
},
methods:{
handleClick(){
this.Verification = false; //点击button改变v-show的状态
let auth_timer = setInterval(()=>{ //定时器设置每秒递减
this.timer--; //递减时间
if(this.timer<=0){
this.Verification = true; //60s时间结束还原v-show状态并清除定时器
clearInterval(auth_timer)
}
},1000)
}
}
}
</script>
<style lang="less">
button{
padding: 10px 20px;
border:1px solid #000
}
</style>
更多推荐
已为社区贡献14条内容
所有评论(0)