車牌號(hào)自定義虛擬鍵盤(vue+vant)

第一次寫這種自定義鍵盤，當(dāng)時(shí)想當(dāng)然的想了想，以為很簡(jiǎn)單，沒有上網(wǎng)查demo和方法，就直接去寫了。事實(shí)上這個(gè)東西是很簡(jiǎn)單的，只不過是我想復(fù)雜了，然后繞了一圈，最后才找到目前這個(gè)比較好的方法。

心路歷程

開始我以為上面的輸入框就是一個(gè)個(gè)input拼接起來的，或者是一個(gè)input用了letter-spacing屬性讓輸入框中的文字分開，然后在輸入內(nèi)容的時(shí)候，判斷一下輸入了幾個(gè)值，讓當(dāng)前input失去焦點(diǎn)，讓下一個(gè)input聚焦即可。

然后鍵盤的話，就是一個(gè)個(gè)的button，點(diǎn)擊每一個(gè)button的時(shí)候，把當(dāng)前對(duì)應(yīng)的值賦給上面的input即可。

結(jié)果：栽在了這個(gè)給input賦值的環(huán)節(jié)上，各種心酸就不想說了，總之，不要用input做這類功能，用幾個(gè)li和一個(gè)數(shù)組就足以搞定輸入框的這個(gè)功能了，而且還方便快捷，最后一天沒有搞定的事情，一個(gè)小時(shí)搞定了...心累...

最后成果

先上個(gè)圖：

思路

  1. 車牌號(hào)最長(zhǎng)的是 8 位，輸入框用 8 個(gè) li 加個(gè)邊框?qū)崿F(xiàn)；
  2. 虛擬鍵盤的彈出功能用 vant 的 van-popup，虛擬鍵盤里面的每一個(gè)按鍵都是 van-button ；
  3. 因?yàn)樾枰袚Q漢字鍵盤和字母數(shù)字鍵盤，所以在 data 中定義一個(gè)字符串和數(shù)組，字符串用來存放漢字，數(shù)組用來存放后面輸入的值，然后挨個(gè)渲染到上面的 li 中；
  4. 車牌號(hào)第一個(gè)是漢字，點(diǎn)擊第一個(gè) li ，喚起漢字鍵盤，點(diǎn)擊后面的 li ，切換鍵盤；
  5. 最后就是需要自行判斷增加和刪除字符了。

代碼

鍵盤樣式不美觀，這個(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è)漢字鍵盤 彈出層 -->
        <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ù)字 鍵盤 -->
        <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,     //是否顯示漢字鍵盤
                show_allBoard:false,     //是否顯示英文數(shù)字鍵盤
                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: {
            // 喚起鍵盤
            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è)格，并且切換鍵盤
                    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 里面被刪的沒有值了，切換鍵盤
                    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 中的值超過 7 個(gè)（車牌號(hào)的最大位數(shù)），刪除最后一個(gè)
                    if(this.numArr.length > 7){
                        this.numArr.pop()
                    }
                }
            },
            // 關(guān)閉虛擬鍵盤
            close_keyboard(){
                this.show_chinese = false;
                this.show_allBoard = false;
            }
        },
    }
</script>

<style scoped lang="scss">
.keyboard{
    width: 100%;
    position: absolute;
}
// 車牌號(hào) & 虛擬鍵盤
.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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的，因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,951評(píng)論 0贊 0
  • 2017.02.22 可以練習(xí)，每當(dāng)這個(gè)時(shí)候，腦袋就犯困，我這腦袋真是神奇呀，一說讓你做事情，你就犯困，你可不要太...
    Carden閱讀 1,490評(píng)論 0贊 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 28,817評(píng)論 1贊 45
  • vue概述 在官方文檔中，有一句話對(duì)Vue的定位說的很明確：Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語法來聲明...
    li4065閱讀 7,618評(píng)論 0贊 25
  • ??JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的。 ??事件，就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,691評(píng)論 1贊 11

友情鏈接更多精彩內(nèi)容