第一次寫(xiě)這種自定義鍵盤(pán)种远，當(dāng)時(shí)想當(dāng)然的想了想，以為很簡(jiǎn)單顽耳，沒(méi)有上網(wǎng)查demo和方法坠敷，就直接去寫(xiě)了。事實(shí)上這個(gè)東西是很簡(jiǎn)單的射富，只不過(guò)是我想復(fù)雜了膝迎，然后繞了一圈，最后才找到目前這個(gè)比較好的方法胰耗。
心路歷程
開(kāi)始我以為上面的輸入框就是一個(gè)個(gè)input拼接起來(lái)的限次，或者是一個(gè)input用了letter-spacing屬性讓輸入框中的文字分開(kāi)，然后在輸入內(nèi)容的時(shí)候柴灯，判斷一下輸入了幾個(gè)值卖漫，讓當(dāng)前input失去焦點(diǎn)，讓下一個(gè)input聚焦即可赠群。
然后鍵盤(pán)的話羊始，就是一個(gè)個(gè)的button，點(diǎn)擊每一個(gè)button的時(shí)候查描，把當(dāng)前對(duì)應(yīng)的值賦給上面的input即可突委。
結(jié)果：栽在了這個(gè)給input賦值的環(huán)節(jié)上，各種心酸就不想說(shuō)了冬三，總之匀油，不要用input做這類功能，用幾個(gè)li和一個(gè)數(shù)組就足以搞定輸入框的這個(gè)功能了勾笆，而且還方便快捷敌蚜，最后一天沒(méi)有搞定的事情，一個(gè)小時(shí)搞定了...心累...
最后成果
先上個(gè)圖：
思路
- 車牌號(hào)最長(zhǎng)的是 8 位匠襟，輸入框用 8 個(gè)
li加個(gè)邊框?qū)崿F(xiàn)钝侠； - 虛擬鍵盤(pán)的彈出功能用 vant 的
van-popup，虛擬鍵盤(pán)里面的每一個(gè)按鍵都是van-button酸舍； - 因?yàn)樾枰袚Q漢字鍵盤(pán)和字母數(shù)字鍵盤(pán)帅韧，所以在 data 中定義一個(gè)字符串和數(shù)組，字符串用來(lái)存放漢字啃勉，數(shù)組用來(lái)存放后面輸入的值忽舟，然后挨個(gè)渲染到上面的
li中； - 車牌號(hào)第一個(gè)是漢字，點(diǎn)擊第一個(gè)
li叮阅，喚起漢字鍵盤(pán)刁品，點(diǎn)擊后面的li，切換鍵盤(pán)浩姥； - 最后就是需要自行判斷增加和刪除字符了挑随。
代碼
鍵盤(pán)樣式不美觀，這個(gè)自行調(diào)整吧勒叠。
<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>
<!-- 選擇車牌號(hào) 首個(gè)漢字鍵盤(pán) 彈出層 -->
<div class="plate_number">
<van-popup
v-model="show_chinese"
position="bottom"
:overlay="true"
overlay-class="displayNone"
>
<div class="plate_chinese_box">
<!-- 點(diǎn)擊對(duì)應(yīng)的漢字兜挨，進(jìn)行輸入 -->
<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>
<!-- 英文 數(shù)字 鍵盤(pán) -->
<div class="allBoard">
<van-popup
v-model="show_allBoard"
position="bottom"
:overlay="true"
overlay-class="displayNone"
>
<div class="plate_number_box">
<!-- 點(diǎn)擊對(duì)應(yīng)的字母或數(shù)字，進(jìn)行輸入 -->
<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, //車牌號(hào)輸入框是否聚焦
show_chinese:false, //是否顯示漢字鍵盤(pán)
show_allBoard:false, //是否顯示英文數(shù)字鍵盤(pán)
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: '', //車牌號(hào)
first:'',
numArr:[],
}
},
methods: {
// 喚起鍵盤(pán)
clickShowKeyboard(){
if(!this.first){
this.show_chinese = true;
}else{
this.show_chinese = false;
this.show_allBoard = true;
}
},
// 選擇車牌號(hào)前面的漢字
checkChinese(index){
// 如果點(diǎn)擊刪除鍵眯分，刪除第一個(gè)格的內(nèi)容
if(this.ChineseList[index].id == 99){
this.first = ''
}else{
// 把選中的字賦值給第一個(gè)格拌汇，并且切換鍵盤(pán)
this.first = this.ChineseList[index].name;
this.show_chinese = false;
this.show_allBoard = true;
}
},
// 選擇車牌號(hào)后面的數(shù)字和字母
checkEnglish_num(index){
// 如果點(diǎn)擊刪除鍵，刪除 numArr 的最后一個(gè)值
if(this.English_Number[index].id == 99){
this.numArr.pop()
// 如果 numArr 里面被刪的沒(méi)有值了弊决，切換鍵盤(pán)
if(this.numArr.length == 0){
this.show_chinese = true;
this.show_allBoard = false;
}
}else{
// 把選中的值 push 到 numArr 內(nèi)
this.numArr.push(this.English_Number[index].name)
// 如果 numArr 中的值超過(guò) 7 個(gè)（車牌號(hào)的最大位數(shù)）噪舀，刪除最后一個(gè)
if(this.numArr.length > 7){
this.numArr.pop()
}
}
},
// 關(guān)閉虛擬鍵盤(pán)
close_keyboard(){
this.show_chinese = false;
this.show_allBoard = false;
}
},
}
</script>
<style scoped lang="scss">
.keyboard{
width: 100%;
position: absolute;
}
// 車牌號(hào) & 虛擬鍵盤(pán)
.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>
