uniapp验证码倒计时效果
文章描述：
uniapp验证码倒计时效果
预览效果
倒计时效果
template
<template>
<view class="page">
<view class="register-from">
<view class="lab">验证码</view>
<view class="code">
<input type="text" v-model="mydata.checkNum" placeholder="请输入验证码" />
</view>
<view class="get-code">
<button @tap="getCheckNum()">{{!codeTime?'获取验证码':codeTime+'s'}}</button>
</view>
</view>
<view class="register-submit">
<button class="reg-btn">注册</button>
</view>
</view>
</template>
script
export default {
data() {
return {
codeTime:0,
}
},
methods: {
getCheckNum(){
if(this.codeTime>0){
uni.showToast({
title: '不能重复获取',
icon:"none"
});
return;
}else{
this.codeTime = 60
let timer = setInterval(()=>{
this.codeTime--;
if(this.codeTime<1){
clearInterval(timer);
this.codeTime = 0
}
},1000)
}
}
}
}
style
.page{
padding: 40upx 35upx;
}
.register-from{
display: flex;
justify-content: space-between;
margin-bottom: 20upx;
}
.register-from view{
font-size: 24upx;
color: #666;
}
.register-from .lab{
line-height: 60upx;
}
.register-from .code{
width: 60%;
background-color: #fff;
border-radius: 4upx;
}
.code input{
font-size: 24upx;
color: #fff;
padding: 6upx 0 6upx 10upx;
border: 1px solid #eee;
display: block;
}
.get-code button{
font-size: 24upx;
color: #fff;
background-color: orange;
width: 176upx;
}
.reg-btn{
background-color: orange;
color: #fff;
font-size: 24upx;
padding: 10upx 0;
}
发布时间：2021/09/14
发表评论