第一次写这种自定义键盘，当时想当然的想了想，以为很简单，没有上网查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>
