车牌号自定义虚拟键盘(vue+vant)

第一次写这种自定义键盘，当时想当然的想了想，以为很简单，没有上网查demo和方法，就直接去写了。事实上这个东西是很简单的，只不过是我想复杂了，然后绕了一圈，最后才找到目前这个比较好的方法。

心路历程

开始我以为上面的输入框就是一个个input拼接起来的，或者是一个input用了letter-spacing属性让输入框中的文字分开，然后在输入内容的时候，判断一下输入了几个值，让当前input失去焦点，让下一个input聚焦即可。

然后键盘的话，就是一个个的button，点击每一个button的时候，把当前对应的值赋给上面的input即可。

结果：栽在了这个给input赋值的环节上，各种心酸就不想说了，总之，不要用input做这类功能，用几个li和一个数组就足以搞定输入框的这个功能了，而且还方便快捷，最后一天没有搞定的事情，一个小时搞定了...心累...

最后成果

先上个图：

思路

1. 车牌号最长的是 8 位，输入框用 8 个 li 加个边框实现；
2. 虚拟键盘的弹出功能用 vant 的 van-popup，虚拟键盘里面的每一个按键都是 van-button ；
3. 因为需要切换汉字键盘和字母数字键盘，所以在 data 中定义一个字符串和数组，字符串用来存放汉字，数组用来存放后面输入的值，然后挨个渲染到上面的 li 中；
4. 车牌号第一个是汉字，点击第一个 li ，唤起汉字键盘，点击后面的 li ，切换键盘；
5. 最后就是需要自行判断增加和删除字符了。

代码

键盘样式不美观，这个自行调整吧。