短信验证,倒计时60秒
由于是使用vue进行编写,vant的框架,里面会有vant的组件,但是核心代码是js
//html
// 我这里是做了样式判断 如果是不可点击则用前一种css否则用后者
<div :class="canClick==true?'getVerificationCode':'getVerificationCode-on'" @click="getVerificationCode">
<div>{{content}}</div>
</div>
// data
content:'提交', // 按钮初始的文字
time:60, //倒计时时间
canClick: true, // 可点击获取验证码条件
toSubmit: 0 , // 是否提交过
// js
getVerificationCode(){
//判断是否可点击
if (!this.canClick) return
// 做了一个vant的加载动画,可不要
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0,
loadingType: 'spinner'
});
//你的接口
.then(res => {
if(res.errcode === 1) {
// 接口成功(发出消息)
Toast.clear();
Toast.success(res.errmsg)
console.log('成功')
this.canClick = false
this.content = this.time + 's后可发送'
// 时间自减
let clock = window.setInterval(() => {
this.time--
this.content1 = this.time + 'sTente'
// 时间小于0的时候恢复
if (this.time < 0) {
window.clearInterval(clock)
this.content = '提交'
this.time = 60
this.canClick = true
}
},1000)
}
})
.catch(err => {
console.log(err)
})
},
.getVerificationCode{
text-align: center;
background-color: rgb(5,155,251);
color: white;
width: 100px;
height: 28px;
font-size: 12px;
line-height: 13px;;
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 10px;
}
.getVerificationCode-on{
text-align: center;
background-color: #cccccc;
color: white;
width: 100px;
height: 28px;
font-size: 12px;
line-height: 13px;;
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 10px;
}