uni-app 实现类似验证码输入

先看效果

四个文本框。当然想要更多可以自己再加，其实实现的思路很简单，废话不多说 贴代码（Value 这块因该都看得懂吧）

<input type="number" disabled @tap='onFocus' value="{{iptValue.length>=1?iptValue[0]:''}}"/>
<input type="number" disabled @tap='onFocus' value="{{iptValue.length>=2?iptValue[1]:''}}"/>
<input type="number" disabled @tap='onFocus' value="{{iptValue.length>=3?iptValue[2]:''}}"/>
<input type="number" disabled @tap='onFocus' value="{{iptValue.length>=4?iptValue[3]:''}}"/>

这里我创建了四个文本框 并且给他们注册点击事件 以及值绑定 重点 是禁用，重点：记得延时赋值

<script>
	export default {
		data() {
			return {
				iptValue: "",
				isFocus: false
			}
		},
		methods: {
			  onFocus: function (e) {
			     var self = this;
			      self.isFocus=true;
			   },
			   setValue: function (event) {//文本框输入事件
				 var self = this;
			     var value = event.target.value;
				 setTimeout(function(){self.iptValue = value;},5); //重点
				 
			   }
		}
	}
</script>

重点来了，在页面上添加一个 input 宽高都设置为0（也就是隐藏了）然后给他一个焦点事件，也就是 点击上面四个文本框让真正的焦点落到这个文本框上从而弹出键盘

<input  type="number" class='hidden_ipt' maxlength="{{4}}"  focus="{{isFocus}}" @input="setValue"></input>

思路就是这样