无光标验证码输入框

1.静态结构

<view class="iptWarp">
	<input class="ipt" v-model="code" type="number" maxlength="6" value="" />
	<view class="box flex">
		<view :class="code.length >= 1 ? 'itemBox act' : 'itemBox ' ">{{code.substring(0,1)}}</view>
		<view :class="code.length >= 2 ? 'itemBox act' : 'itemBox ' ">{{code.substring(1,2)}}</view>
		<view :class="code.length >= 3 ? 'itemBox act' : 'itemBox ' ">{{code.substring(2,3)}}</view>
		<view :class="code.length >= 4 ? 'itemBox act' : 'itemBox ' ">{{code.substring(3,4)}}</view>
		<view :class="code.length >= 5 ? 'itemBox act' : 'itemBox ' ">{{code.substring(4,5)}}</view>
		<view :class="code.length >= 6 ? 'itemBox act' : 'itemBox ' ">{{code.substring(5,6)}}</view>
	</view>
</view>

2. js获取code

<script>
export default {
	data() {
		return {
			code: '',
		}
	}
}
</script>

3.css

.iptWarp {
	position: relative;
		height: 100rpx;
		text-align: center;
	
		.ipt {
			position: absolute;
			opacity: 0;
			width: 100%;
			height: 100%;
		}
	
		.box {
			.itemBox {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				margin: 0 10rpx;
				border-bottom: 2rpx solid #EEEEEE;
				color: #FFFFFF;
				&.act {
					border-bottom: 2rpx solid #AE3523;
				}
			}
		}
	}