您现在的位置是:网站首页>前端技术>uniappuniapp
uniapp 实现验证码输入
神夜2020-06-01 10:42:32【uniapp】4217人已围观文章来源:神夜个人博客
简介
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条
- 微信公众号:扫描二维码,关注我们