uni-app 之验证码

手机APP---验证码

最近公司在开发手机APP，app避不可免的就是登录了，emmmm 登录验证码那必须的是有的，我们公司发给我们的图片是酱紫的~~

　　这个要求大家应该都能看懂，做这个手机号啊，验证码啊，读秒这些啊，这都emmmm分分钟完成了？但是这个四位数的验证码整整折磨了我四天，啊！！！！ 恶龙咆哮~

　　其实这个实现 并不难，刚进入页面的时候，获取第一个input的焦点，最大长度为1，输入完成后自动跳到下一个input框，最开始的时候，focus全部为false，跳到是变为true，然后删除时，跳回到上一个input，真的是这样说的很溜，但是这个真的折磨了我四天，想了我能想到的，结果这个方案还是废弃掉了，（不包含我很菜的原因），我在解决这个问题的时候发现了一个很严重的问题，就是在uni-app上的时候使用他的input这个输入框的时候，使用它的@input的时候，他会跟v-model  emmmm，怎么说，，，，姑且说是冲突把，它获取不到第一个输入数据的内容，像我上面的有四个input，但是就只能获取到他的三个数据，第一个数据是获取不到的，input出来的值跟v-model的值是对不上的，后来，我解决了这个问题，我将input里面的。detail.value的值直接赋值给了model对应的字段，‘强行’让他们一样的，BUT！！！这个问题解决完之后，还有一系列，，，直接把我逼疯emmmm，后来项目更新在急，就把这个先废弃了，等有空了向大佬请教再去研究他，然后我换了另一种方法，手动搭建还原了一个键盘，通过键盘的点击，获取值，然后我在显示在view中

具体如下：

　　　说起这个样式，不得不说自己今天刚刚认识的一个display:table ,才发现自己是真的菜啊，别人不是白说的，我以前用display仅仅限于 none，block，inline，flex。我今天看见display：table的时候震惊坏了，后来我上了W3C仔细看了看，他讲的是将元素座位块集表格来显示，是一个类似于table的，表格前后还是带有 换行符的，看一下具体代码

　　html:

　　
　　　　
　　　　　　{{code.val}}
　　　　
　　

　　js：

　　codeAry: [{"val": ""}, {"val": ""}, {"val": ""}, {"val": ""}],          //将四位验证码写成数组遍历

　　css样式：

        .code-view {
		height: 150upx;
		display: table;
		text-align: center;
		margin: 0 auto;
		border-collapse: separate;
		border-spacing: 10px 5px;
	}
	.code-item {
		display: table-cell;
		border-bottom: 1px solid #999;
		width: 136upx;
		font-size: 90upx;
                margin-left: 5px;
	}                

　　这样就达到了一下的效果：

     最下面的这段就是我手写的一个键盘，通过点击键盘来获取键盘对应的值，然后显示在上面

详细代码为：

　　各位大佬，代码仅供参考，若有不足，还请改正~~~

转载于:https://www.cnblogs.com/gongliying/p/11055260.html