获取验证码定时器的编写

最新推荐文章于 2024-11-05 08:32:25 发布

时光不老 ζ

最新推荐文章于 2024-11-05 08:32:25 发布

阅读量124

点赞数 1

文章标签： uni-app

本文链接：https://blog.csdn.net/qq_49934059/article/details/118878696

版权

这是一个关于前端验证码输入组件的实现示例。代码中展示了如何创建一个包含输入框和发送验证码按钮的视图，并通过JavaScript实现了点击按钮后启动倒计时功能，期间按钮变为不可点击状态，倒计时结束后恢复发送验证码功能。

摘要由CSDN通过智能技术生成

<template>
	<view>
			<view class="box">
				<view class="title">
					验证码
				</view>
				<view class="inp">
					<input type="number" placeholder-style="color:#ABACAD" placeholder="请输入验证码" />
					<text :class="{disbled: isDisbled}" @click="getyzm">{{btnstr}}</text>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnstr:'发送验证码',
				isDisbled:false
			}
		},
		methods: {
			timewait(t) {
				const _this = this;
				setTimeout(function(){
					if(t>=0){
						_this.btnstr = t + '秒后点击';
						t--;
						_this.timewait(t);
					}else{
						_this.btnstr = '发送验证码';
						t = 60;
						_this.btndisabled=false
					}
				},1000)
			},
			getyzm() {
				this.timewait(60);
				this.isDisbled=true;
			}
		}
	}
</script>

<style lang="scss" scoped>
		.box {
			font-size: 28upx;
			color: #B9BFCC;
			margin-bottom: 40upx;
			.title {
				font-size: 24upx;
				margin-bottom: 20upx;
			}
			.inp {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 28upx;
				height: 100upx;
				background-color: #F4F5F9;
				border-radius: 16upx;
				text {
					color: #4058FA;
				}
				.disbled {
					pointer-events: none;
					cursor: default;
				}
			}
		}
</style>