uni、vue3——验证码按钮

最新推荐文章于 2024-02-20 06:28:30 发布

耶啵奶膘

最新推荐文章于 2024-02-20 06:28:30 发布

阅读量241

点赞数

文章标签：前端 uni-app vue

本文链接：https://blog.csdn.net/xulihua_75/article/details/129932537

版权

案例演示

在这里插入图片描述

案例代码

<button class="getCode" @click="getCode" :disabled="state.disabled">{{state.getCodeText}}</button>

const state = reactive({
	// 获取验证码
	getCodeText: '获取验证码',
	disabled: false,
	holdTime: 10, //默认60秒计时
})

function getCode() {
	console.log(11);
	state.disabled = true
	state.getCodeText = "发送中..." //发送验证码
	setTimeout(() => {
		showToast('验证码已发送')
		// 调用短信接口
		codeMsg()
		setTimer(); //调用定时器方法
	}, 1000)
}

function codeMsg() {
	console.log("此处调用短信接口");
}
let Timer = null

function setTimer() {
	Timer = setInterval(() => {
		if (state.holdTime <= 0) {
			state.disabled = false
			state.getCodeText = "获取验证码"
			clearInterval(Timer); //清除该函数
			return;
		}
		state.getCodeText = "重新获取(" + state.holdTime + ")"
		state.holdTime--;
	}, 1000)
}

.getCode {
	border: 1rpx solid #228BF1;
	background-color: #ffffff;
	color: #228BF1;
	width: 164rpx;
	height: 65rpx;
	padding: 0;
	margin: 0;
	font-size: 26rpx;
	margin-left: 20rpx;
}

.getCode::after {
	border: none;
}