uniApp实现短信验证码登录功能
uniApp实现短信验证码登录功能,vue实现短信验证码登录功能
·
本人近期uniApp项目,需要做一个短信输入框功能,开始我是写的6个input,但是发现删除的时候uniApp没办法监听到键盘删除事件,于是我使用了另一种思路实现:不使用input改为view,然后手写键盘,最终效果图如下:
废话不多说直接上代码,(包含验证码输入框和键盘)
<template>
<view class="sms-input-container">
<view class="code-view align-items">
//模拟input显示选中的数字
<view class="option" :class="currentInput === item.id && 'option_active'" v-for="item in code"
:key="item.id" @click="onInput(item)">
{{item.name}}
</view>
</view>
<view class="keyboard" :class="isShow && 'keyboard-active'">
//实现数字键盘
<view class="option" v-for="item in [1,2,3,4,5,6,7,8,9]" :key="item" @click="onSelect(item)">{{item}}</view>
<view class="option" @click="onKeyboardHide">
//键盘左下角的图片
<image class="img_a" src="../../static/image/keyboard.png"></image>
</view>
<view class="option" @click="onSelect(0)">0</view>
<view class="option" @click="onDelete">
//键盘右下角的图片
<image class="img" src="../../static/image/keyboard-delete.png"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
code: [
{id: 1,name: ''},
{id: 2,name: ''},
{id: 3,name: ''},
{id: 4,name: ''},
{id: 5,name: ''},
{id: 6,name: ''},
],
//当前选中的view
currentInput: 1,
isShow: false
}
},
watch: {
code: {
deep: true, //true为进行深度监听,
handler(newVal, oldVal) {
let state = true;
let sms_code = '';
for(let item of newVal){
if(item.name){
sms_code = sms_code+item.name
}else{
state = false;
}
}
//state为true 表示输入完成可以调用登录接口,false表示有view的值为空
if (state) {
console.log("输入完成后的验证码:",sms_code)
//这里调用login
}
}
}
},
methods: {
// 键盘选择
onSelect(val) {
for (let item of this.code) {
if (item.id === this.currentInput) {
item.name = val;
}
}
this.currentInput = this.currentInput < 6 ? this.currentInput + 1 : this.currentInput;
},
// 选择input
onInput(item) {
this.currentInput = item.id;
this.isShow = false;
},
// 隐藏键盘
onKeyboardHide() {
this.isShow = true;
},
onDelete() {
for (let item of this.code) {
if (item.id === this.currentInput) {
item.name = '';
}
}
this.currentInput = this.currentInput > 1 ? this.currentInput - 1 : this.currentInput;
}
}
}
</script>
<style scoped lang="scss">
.sms-input-container {
.code-view {
justify-content: space-between;
margin-top: 30rpx;
.option {
width: 90rpx;
height: 90rpx;
line-height: 90rpx;
border-radius: 6rpx;
background-color: #f2f2f2;
text-align: center;
font-size: 30rpx;
color: #000;
box-sizing: border-box;
}
.option_active {
border: 1rpx solid red;
}
}
.keyboard {
position: fixed;
bottom: 0;
left: 0;
width: 750rpx;
height: 450rpx;
padding: 10rpx 0 30rpx 0;
background-color: #f2f2f2;
transition: all 0.3s;
display: flex;
flex-wrap: wrap;
.option:active {
background-color: rgba(192, 192, 192, 0.2);
}
.option {
width: 236rpx;
height: 96rpx;
margin: 10rpx 0 0 10rpx;
line-height: 96rpx;
background-color: #fff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 42rpx;
font-weight: 600;
border-radius: 20rpx;
.img {
width: 70rpx;
height: 70rpx;
}
.img_a {
width: 60rpx;
height: 60rpx;
}
}
}
.keyboard-active {
bottom: -500rpx !important;
}
.align-items{
display: flex;
align-items: center;
}
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)