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

心路历程

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

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

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

最后成果

先上个图：

思路

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

代码

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

<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">
                        <div>╳</div>
                        <li></li>
                    </div>
                </div>
            </van-popup>
        </div>
        <!-- 英文 数字 键盘 -->
        <div class="allBoard">
            <van-popup
                v-model="show_allBoard"
                position="bottom"
                :overlay="true"
                overlay-class="displayNone"
            >
                <div class="plate_number_box">
                    <!-- 点击对应的字母或数字，进行输入 -->
                    <van-button
                        size="small"
                        v-for="(item, index) in English_Number"
                        :key="item.id"
                        @click="checkEnglish_num(index)"
                    >{{item.name}}</van-button>
                    <div class="close-box" @click.stop="close_keyboard">
                        <div>╳</div>
                        <li></li>
                    </div>
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                showKeyboard: true,    //车牌号输入框是否聚焦
                show_chinese:false,     //是否显示汉字键盘
                show_allBoard:false,     //是否显示英文数字键盘
                ChineseList:[
                    {name:'京',id:1},
                    {name:'津',id:2},
                    {name:'冀',id:3},
                    {name:'晋',id:4},
                    {name:'蒙',id:5},
                    {name:'辽',id:6},
                    {name:'吉',id:7},
                    {name:'黑',id:8},
                    {name:'沪',id:9},
                    {name:'苏',id:10},
                    {name:'浙',id:11},
                    {name:'皖',id:12},
                    {name:'闽',id:13},
                    {name:'赣',id:14},
                    {name:'鲁',id:15},
                    {name:'豫',id:16},
                    {name:'鄂',id:17},
                    {name:'湘',id:18},
                    {name:'粤',id:19},
                    {name:'桂',id:20},
                    {name:'琼',id:21},
                    {name:'渝',id:22},
                    {name:'川',id:23},
                    {name:'贵',id:24},
                    {name:'云',id:25},
                    {name:'藏',id:26},
                    {name:'陕',id:27},
                    {name:'甘',id:28},
                    {name:'青',id:29},
                    {name:'宁',id:30},
                    {name:'新',id:31},
                    {name:'←',id:99},
                ],
                English_Number:[
                    {name:'1',id:28},
                    {name:'2',id:29},
                    {name:'3',id:30},
                    {name:'4',id:31},
                    {name:'5',id:32},
                    {name:'6',id:33},
                    {name:'7',id:34},
                    {name:'8',id:35},
                    {name:'9',id:36},
                    {name:'0',id:37},
                    {name:'Q',id:38},
                    {name:'W',id:39},
                    {name:'E',id:40},
                    {name:'R',id:41},
                    {name:'T',id:42},
                    {name:'Y',id:43},
                    {name:'U',id:44},
                    {name:'I',id:45},
                    {name:'O',id:46},
                    {name:'P',id:47},
                    {name:'A',id:48},
                    {name:'S',id:49},
                    {name:'D',id:50},
                    {name:'F',id:51},
                    {name:'G',id:52},
                    {name:'H',id:53},
                    {name:'J',id:54},
                    {name:'K',id:55},
                    {name:'L',id:56},
                    {name:'Z',id:57},
                    {name:'X',id:58},
                    {name:'C',id:59},
                    {name:'V',id:60},
                    {name:'B',id:61},
                    {name:'N',id:62},
                    {name:'M',id:63},
                    {name:'←',id:99},
                ],
                plate_number: '',   //车牌号
                first:'',
                numArr:[],
            }
        },
        methods: {
            // 唤起键盘
            clickShowKeyboard(){
                if(!this.first){
                    this.show_chinese = true;
                }else{
                    this.show_chinese = false;
                    this.show_allBoard = true;
                }
            },
            // 选择车牌号前面的汉字 
            checkChinese(index){
                // 如果点击删除键，删除第一个格的内容
                if(this.ChineseList[index].id == 99){
                    this.first = ''
                }else{
                    // 把选中的字赋值给第一个格，并且切换键盘
                    this.first = this.ChineseList[index].name;
                    this.show_chinese = false;
                    this.show_allBoard = true;
                }
            },
            // 选择车牌号后面的数字和字母 
            checkEnglish_num(index){
                // 如果点击删除键，删除 numArr 的最后一个值
                if(this.English_Number[index].id == 99){
                    this.numArr.pop()
                    // 如果 numArr 里面被删的没有值了，切换键盘
                    if(this.numArr.length == 0){
                        this.show_chinese = true;
                        this.show_allBoard = false;
                    }
                }else{
                    // 把选中的值 push 到 numArr 内
                    this.numArr.push(this.English_Number[index].name)
                    // 如果 numArr 中的值超过 7 个（车牌号的最大位数），删除最后一个
                    if(this.numArr.length > 7){
                        this.numArr.pop()
                    }
                }
            },
            // 关闭虚拟键盘
            close_keyboard(){
                this.show_chinese = false;
                this.show_allBoard = false;
            }
        },
    }
</script>

<style scoped lang="scss">
.keyboard{
    width: 100%;
    position: absolute;
}
// 车牌号 & 虚拟键盘
.input-box{
    width: 21rem;
    height:3.2rem;
    margin: auto;
    background:rgba(255,255,255,1);
    box-shadow:0px 6px 8px 0px rgba(96,100,112,0.1);
    border-radius:.4rem;
    border:1px solid rgba(206,208,210,1);
    margin: 0 auto 2rem;
    display: flex;
    justify-content: center;
    li{
        flex: 1;
        border-right:1px solid rgba(206,208,210,1);
        box-sizing: border-box;
        margin-left: -1px;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #323233;
    }
    li:last-child{
        border: none;
    }
}

.class-close-box{
    width: 2rem;
    height: 1.5rem;
    position: absolute;
    right: 0.5rem;
    top: -1.3rem;
}
.class-close-box-div{
    width: 1rem;
    height: 1rem;
    font-size: 0.8rem;
    line-height: 1rem;
    margin: auto;
    text-align: center;
    border: 1px solid #666;
    border-radius: 50%;
}
.class-close-box-li{
    width: 1px;
    height: 0.5rem;
    background: #666;
    margin: auto;
}
.overflow-y{
    overflow-y: inherit;
}
.class-van-button-small{
    min-width: 0;
    border-radius: 5px;
    margin: 5px 2px;
    box-shadow: 5px 5px 5px #aaa;
}
.class-plate-box{
    width: 100%;
    padding: 0.7rem 0.5rem;
    box-sizing: border-box;
    background: #eaf1f9;
    position: relative;
}
.plate_number{
    .van-popup{
        @extend .overflow-y;
    }
    .van-popup--bottom{
        background: #eee;
    }
    .plate_chinese_box{
        width: 100%;
        @extend .class-plate-box;
        .close-box{
            @extend .class-close-box;
            div{
                @extend .class-close-box-div;
            }
            li{
                @extend .class-close-box-li;
            }
        }
        .van-button--small{
            width: 11.3%;
            height: 3.5rem;
            @extend .class-van-button-small;
        }
    }
}
.allBoard{
    .van-popup{
        @extend .overflow-y;
    }
    .plate_number_box{
        width: 100%;
        @extend .class-plate-box;
        .close-box{
            @extend .class-close-box;
            div{
                @extend .class-close-box-div;
            }
            li{
                @extend .class-close-box-li;
            }
        }
        .van-button--small{
            width: 8.8%;
            height: 3rem;
            @extend .class-van-button-small;
        }
        .van-button--small:nth-child(1){
            margin-bottom: 5px;
        }
        .van-button--small:nth-child(21){
            margin-left: 5%;
        }
        .van-button--small:nth-child(30){
            margin-left: 10%;
        }
        .van-button--small:last-child{
            width: 13%;
        }
    }
}
</style>
<style lang="scss">
.displayNone{
    display: none!important;
}
</style>