判断是否可点击,以及倒计时显示,调用示例
<captcha-btn slot="right" :waitTime="waitTime" @getCaptcha="getCaptcha"></captcha-btn>
这个waitTime是一个存储在全局的与电话号码绑定的时间,具体captchaBtn内容如下
<template>
<div class="content">
<x-button class="btn" type="primary" :disabled="disabled" @click.native="getCaptcha">{{captcha}}</x-button>
</div>
</template>
<script>
import {XButton} from 'vux'
let timer
export default {
name: 'captcha-btn',
props: {
waitTime: {
type: Number,
default: 60
}
},
data () {
return {
captcha: '获取验证码',
disabled: false,
wait: this.waitTime
}
},
beforeMount () {
// 倒计时大于一分钟 或者是默认值 60 可以发送验证码
if (this.wait < 0 || this.wait === 60) {
this.captcha = '获取验证码'
clearTimeout(timer)
this.wait = 60
this.getCaptcha()
} else {
clearTimeout(timer)
this.timeDown()
}
},
destroyed () {
this.captcha = '获取验证码'
clearTimeout(timer)
},
methods: {
getCaptcha () {
if (this.wait === 60) {
this.timeDown()
this.$emit('getCaptcha')
}
},
timeDown () {
if (this.wait <= 0) {
this.disabled = false
this.captcha = '获取验证码'
this.wait = 60
clearTimeout(timer)
return
} else {
this.disabled = true
this.captcha = `重新发送(${this.wait}s)`
this.wait--
}
timer = setTimeout(() => {
this.timeDown()
}, 1000)
}
},
components: {
XButton
}
}
</script>
<style lang="scss" scoped>
@import "../../styles/custom/variables";
.content {
.btn.is-disabled {
width: 130px;
color: $grey-1 !important;
background-color: #fff !important;
}
.btn {
font-size: $font12;
height: 36px !important;
&.weui-btn_primary{
background: none !important;
width: 94px;
font-size: $font12;
color: #4C7DEF;
line-height: 17px;
padding: 0;
}
&.weui-btn:after{
border: 0;
}
}
}
</style>