模拟密码输入框在手机端弹出软键盘被遮挡

一般情况下我们都会将input的opacity的值设置为0.
问题就出在这，透明度调为0之后手机端的软键盘就将这个input给忽略了，导致元素被遮挡。
这里需要按条件去设置透明度

<view class="psw">
	<input :class="focusSecond ? 'transparent' : 'notransparent'" v-model="comfirmPsw" type="number" @focus="focusSecond = true" @blur="focusSecond = false" maxlength="6" />
	<view class="pswBox" :class="focusSecond ? 'highlight' : ''">
		<text>{{ comfirmPsw.slice(0, 1) ? '●' : '' }}</text>
		<text>{{ comfirmPsw.slice(1, 2) ? '●' : '' }}</text>
		<text>{{ comfirmPsw.slice(2, 3) ? '●' : '' }}</text>
		<text>{{ comfirmPsw.slice(3, 4) ? '●' : '' }}</text>
		<text>{{ comfirmPsw.slice(4, 5) ? '●' : '' }}</text>
		<text>{{ comfirmPsw.slice(5, 6) ? '●' : '' }}</text>
	</view>
</view>

<style>
.notransparent{
	opacity: 0.1;
}
.transparent{
	opacity: 0;
}
.psw {
	position: relative;
	width: 578rpx;
	height: 88rpx;
}
.psw input {
	width: 578rpx;
	height: 88rpx;
	position: relative;
	z-index: 9;
	color: #38317b;
}
.pswBox {
	display: flex;
	flex-shrink: 0;
	text-align: center;
	position: absolute;
	z-index: 8;
	top: 0;
	left: 0;
}
.pswBox text {
	width: 84rpx;
	height: 84rpx;
	border-radius: 20rpx;
	font-size: 60rpx;
	background: rgba(255, 255, 255, 0.1);
	margin-right: 10rpx;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.highlight text {
	border: 1px solid #4acabf;
	transition: border-color 0.2s linear;
}
.pswBox text:last-child {
	margin-right: 0;
}
</style>