uni-app 获取验证码倒计时

基础布局

<view class="getCode" :class="{activeCode:codeFlag}" @click="getCode">

data() {
			return {
				codeTxt:'获取验证码',
				codeFlag:true, // 控制按钮是否可点击
			}
		},

方法如下

methods: {
	getCode() {
		if(this.codeFlag == false) {
			return
		}
		this.codeFlag = false;
		var time = 60
		this.codeTxt = '重新获取' + time
		var timer = setInterval(()=>{
				this.codeTxt = '获取验证码'
				if(time == 1) {
					this.codeFlag = true;
					clearInterval(timer)
				} else {
				time--
				this.codeTxt = '重新获取' + time
			}
			
		},1000)
	}
}

基本样式 activeCode 为可点击样式，getCode 为不可点击样式

<style>
	.getCode {
		height: 60rpx;
		width: 180rpx;
		background: #f7f7f7;
		color: #666666;
		line-height: 60rpx;
		font-size: 24rpx;
		text-align: center;
	}
	.getCode.activeCode {
		background: #21bbef;
		color: #FFFFFF;
	}
</style>