您现在的位置是:网站首页>前端技术>uniappuniapp

uniapp 实现验证码输入

神夜2020-06-01 10:42:32uniapp4217人已围观文章来源:神夜个人博客

简介

uniapp实现验证码输入,自动获取焦点

实现原理:首先定义6个输入框用view,里面写一个闪动的光标 view. 然后再写一个输入框,宽度100%浮动,opcity:0; 让其输入框看不见,显示自定义的输入框view. 定义一个curIndex 表示当前输入的下一个位置。

代码如下:

<style lang="scss" scoped>
.login{ padding:0 60rpx; padding-top:80rpx;
	.tit{padding-top:130rpx; text{display:block; font-size:45rpx; font-weight: bold; color:#222; &.t2{font-weight:normal; padding-top:12rpx; font-size:28rpx; color:#999} } }		
	.input{ margin-top:60rpx; height:100rpx; position: relative; display:flex; 
	  input{ position: absolute; height:100rpx; width:100%; left:0; top:0;}
	  .input-list{ display: flex; height:100rpx; margin-left:-20rpx; }
	  .input-list .item{ margin-left:20rpx; position: relative; width:90rpx; height:100rpx; border:0; font-weight:bold; color:#333; text-align:center; line-height:100rpx; font-size:50rpx; background:none; border-bottom:1px solid #dcdcdc;}  }	
   .input-list .item.on{ border-bottom:1px solid $uni-color-primary; color:$uni-color-primary;}
			.input-list .item label{position:absolute; animation:gbani 1s infinite; left:0; right:0; margin:auto; width:2px; top:50%; transform: translateY(-50%); height:50%; background:$uni-color-primary;}
}	
@keyframes gbani {
	0% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 0;}
}
</style>
<template>
<view class="app">	
    <!--账号密码登录-->
    <view class="login">
        <view class="tit">
         <text>输入验证码</text><text class="t2">已发送验证码至+86 1572870000</text>
        </view>
        <view class="input">
         <view class="input-list">
                 <view class="item" :class="curIndex==index?'on':''" v-for="(item,index) in codeArr"><label v-if="index==curIndex"></label>{{item}}</view>
            </view>		
         <input type="number" style="width:100%;opacity:0;" @input="inputCode" :focus="true" :maxlength="codeArr.length" />
        </view>
    </view>
</view>
</template>

<script>
export default {
	data() {
		return {
			type:
			1,
			//登录类型 1账号密码 2短信登录
			eyeopen: true,
			phone: '',
			curIndex: 0,
			codeArr: ['', '', '', '', '', ''],
		}
	},
	
	onShow(e) {
	
	},
	
	methods: {
		//输入验证码
		inputCode(e) {
			let str = e.target.value.split('');
			let codeArr = this.codeArr;
			for (let i = 0; i < codeArr.length; i++) {
				codeArr[i] = str[i];
				if (!str[i]) {
					codeArr[i] = ''
				}
			}
			this.curIndex = str.length;
		}
	}
}
</script>

站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:511条
  • 微信公众号:扫描二维码,关注我们