车牌号自定义虚拟键盘(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. 最后就是需要自行判断增加和删除字符了。

代码

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

<template>
    <div class="keyboard">
        <div class="input-box" @click="clickShowKeyboard">
                <li>{
   {first}}</li>
                <li>{
   {numArr[0]}}</li>
                <li>{
   {numArr[1]}}</li>
                <li>{
   {numArr[2]}}</li>
                <li>{
   {numArr[3]}}</li>
                <li>{
   {numArr[4]}}</li>
                <li>{
   {numArr[5]}}</li>
                <li>{
   {numArr[6]}}</li>
            </div>
        <!-- 选择车牌号 首个汉字键盘 弹出层 -->
        <div class="plate_number">
            <van-popup
                v-model="show_chinese"
                position="bottom"
                :overlay="true"
                overlay-class="displayNone"
            >
                <div class="plate_chinese_box">
                    <!-- 点击对应的汉字，进行输入 -->
                    <van-button
                        size="small"
                        v-for="(item, index) in ChineseList" 
                        :key="item.id"
                        @click="checkChinese(index)"
                    >{
   {item.name}}</van-button>
                    <div class="close-box" @click.stop="close_keyboard">