uniapp 6位验证码输入框实现方法

实现思路就是下层布局6个input或者view ，然后上层放一个打的input盖住下面，然后把上层的背景和显示隐去。

然后在data中定义一个code 来实现上层input和下层view的关联显示。上代码（底层布局自己可以随意改成想要的样式）

 

<template>
	<view>
		<view style="color:#ff00ff">{{message}}</view>
		<view class="code-input-main">
			<view class="inputLine">

				<input class="input-item" maxlength="1" :value="code[0]"></input>
				<input class="input-item" maxlength="1" :value="code[1]"></input>
				<input class="input-item" maxlength="1" :value="code[2]"></input>
			</view>
			<view class="inputLine">

				<input class="input-item" maxlength="1" :value="code[3]"></input>
				<input class="input-item" maxlength="1" :value="code[4]"></input>
				<input class="input-item" maxlength="1" :value="code[5]"></input>
			</view>


			<input @input="inputEvent" class="code-input-input" v-model="code" maxlength="6" type="number" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
			};
		},
		props: {
			message: '',
		},
		methods: {
			inputEvent(res){
				console.log("input 1 input code  components : ", res.detail.value);
				/* this.$emit('vueMsg',res.detail.value); */
				 
			}
		}
	}
</script>

<style>
	.code-input-input {
		height: 400upx;
		position: absolute;
		width: 100%;
		outline: none;
		color: transparent;
		text-shadow: 0 0 0 transparent;
		width: 300%;
		margin-left: -100%;
		background: #00000000;
	}

	.code-input-main {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 400upx;
	}

	.input-item {
		width: 110upx;
		height: 110upx;
		font-size: 40upx;
		background: #000000;
		text-align: center;
		border-radius: 5%;
		margin-left: 40upx;
		margin-right: 40upx;
		color: #00F6FF;
	}

	.inputLine {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 80upx;
	}
</style>