uniApp实现短信验证码登录功能

本人近期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>