uni-app 踩坑之验证码多框输入

要实现的小程序页面如图：

页面代码：

<template>
	<view class="login-container">
		<view class="login-header">
			<view class="login-header-item">请输入验证码</view>
			<view class="font-color-9b9ba5 font-26">验证码已发送至手机</view>
			<view class="font-color-9b9ba5 font-26" style="margin-top: 12rpx;">12345678910</view>
		</view>
		<view>
			<view class="font-26 flex-between-center" style="margin-bottom: 30rpx;">
				<text class="font-color-9b9ba5">请输入6位数字验证码</text>
				<text class="font-color-0078FF">59s</text>
			</view>
			<view class="flex-between-center code-input-container" style="font-size: 42rpx;">
				<!-- 页面显示 -->
				<input
					type="number"
					v-for="(item, index) in code_len"
					:key="index"
					disabled
					@tap="onCode"
					:value="code_val.length >= index + 1 ? code_val[index] : ''"
					class="code-input-item flex-default-center"
				/>
			</view>
			<!-- 实际监听 -->
			<input v-if="is_focus" @blur="blurCode" @input="setCode" type="number" class="code-input" v-model="code_val" :maxlength="code_len" :focus="true"/>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			code_len: 6, // 验证码长度
			code_val: '', // 验证码的值
			is_focus: false
		};
	},
	methods: {
		setCode(e) {
			this.code_val = e.detail.value;
		},
		onCode() {			
			this.is_focus = true;
		},
		blurCode() {
			this.is_focus = false;
		}
	}
};
</script>
<style lang="scss">
.font-26 {
	font-size: 26rpx;
}
.font-color-9b9ba5 {
	color: #9b9ba5;
}
.font-color-0078FF {
	color: #0078ff;
}
.login-container {
	padding: 0 30rpx;
}
.login-header {
	padding: 90rpx 0;
	.login-header-item {
		font-size: 42rpx;
		margin-bottom: 17rpx;
	}
}
.code-input {
	height: 0;
	width: 0;
}
.code-input-item {
	width: 100rpx;
	height: 100rpx;
	border: 1px solid #9b9ba5;
	justify-content: center;
	text-align: center;
}
</style>

重点注意 v-if 的绑定，由失焦隐藏、点击显示来控制手机实际键盘的弹出。