項(xiàng)目介紹：

這個項(xiàng)目是基于 vue2+vant? 寫的錄入車牌的鍵盤, 有需要的伙伴可以參考一下;

先看一下效果圖:

?

這個是組件的代碼,直接在頁面中引用即可,車牌號的值存在carNumber里面,在確定按鈕中,講完整的carNumber傳到引用的頁面中即可.

<template>
  <div class="keyboards">
    <div class="keyboards_title">輸入車牌<span>(綠色背景為新能源車牌)</span> </div>
    <div>
      <ul class="input_box" @click="clickShowKeyboard">
        <li >{{ first }}</li>
        <li>{{ numArr[0] }}</li><span style="font-size: .5rem;line-height: .9rem;color:#ced0d2 ;">?</span>
        <li>{{ numArr[1] }}</li>
        <li>{{ numArr[2] }}</li>
        <li>{{ numArr[3] }}</li>
        <li>{{ numArr[4] }}</li>
        <li>{{ numArr[5] }}</li>
        <li>{{ numArr[6] }}</li>
      </ul>
    </div>
    <div class="keySure" @click="submitNumber">確定</div>
    <!-- 鍵盤-中英文 -->
    <van-popup v-model="showKeyboards" position="bottom" :overlay="false" overlay-class="displayNone">
      <div class="keyboards_keys">
        <div class="finish_key"><span @click="hidekeyboards">完成</span></div>
        <div class="finish_line"></div>
        <div class="key_box">
          <!-- 中文 -->
          <div v-if="checkLangages" class="chinese">
            <ul v-for="(item, index) in chineseList" :key="index">
              <li v-for="val in item" :key="val.id" :class="{ del: val.id === 99 || val.id === 98 }" @click="chooseChinese(val)">{{
                val.name }}</li>
            </ul>
          </div>
          <!-- 數(shù)字英文 -->
          <div v-else class="english">
            <ul v-for="(item, index) in englishList" :key="index">
              <li v-for="val in item" :key="val.id" :class="{ del: val.id === 99 || val.id === 97 }" @click="chooseEnglish(val)">{{
                val.name }}</li>
            </ul>
          </div>

        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// import { submitCarNumber } from '../../api/global'
import { Toast } from 'vant';

export default {
  data() {
    return {
      first: '',
      numArr: [],
      showKeyboards: true,
      checkLangages: true,
      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: 'ABC', id: 98 },
          { name: "新", id: 31 },
          { name: "使", id: 32 },
          { name: "領(lǐng)", id: 33 },
          { name: "警", id: 34 },
          { name: "學(xué)", id: 35 },
          { name: "港", id: 36 },
          { name: "澳", id: 37 },
          { name: "刪除", id: 99 }
        ]
      ],
      englishList: [
        [
          { name: "1", id: 40 },
          { name: "2", id: 41 },
          { name: "3", id: 42 },
          { name: "4", id: 43 },
          { name: "5", id: 44 },
          { name: "6", id: 45 },
          { name: "7", id: 46 },
          { name: "8", id: 47 },
          { name: "9", id: 48 },
          { name: "0", id: 49 },
        ],
        [
          { 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: '地區(qū)', id: 97 },
          { 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 }
        ]
      ],
      carNUmber: ''
    }
  },
  methods: {
    // 喚醒鍵盤
    clickShowKeyboard() {
      this.showKeyboards = true
      if (!this.first) {
        this.checkLangages = true
      } else {
        this.checkLangages = false
      }
    },
    // 選擇車牌號前面的漢字
    chooseChinese(val) {
      if (val.id === 97 || val.id === 98) {
        this.checkLangages = !this.checkLangages
      } else if (val.id === 99) {
        if (this.numArr.length === 0) {
          this.first = "";
        }
      } else {
        // 把選中的字賦值給第一個格，并且切換鍵盤
        this.first = val.name;
        this.checkLangages = false;
      }
    },
    // 選擇車牌后面的數(shù)字和字母
    chooseEnglish(val) {
      if (val.id === 97 || val.id === 98) {
        this.checkLangages = !this.checkLangages
      } else if (val.id === 99) {
        this.numArr.pop()

        // 如果數(shù)字,字母被刪光了,則切換到中文鍵盤
        if (this.numArr.length === 0) {
          this.checkLangages = true
        }
      } else {  //把選中的值push到numArr里面
        this.numArr.push(val.name)
        if (this.numArr.length > 7) {
          this.numArr.pop()
        }
      }
      this.carNUmber = this.first + this.numArr.join('')
      console.log(this.carNUmber);
    },
    // 完成,隱藏鍵盤
    hidekeyboards() {
      this.showKeyboards = false
    },
    // 提交車牌號
    submitNumber() {
      const carNumberReg = /^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9掛學(xué)警港澳]$/
      if (carNumberReg.test(this.carNUmber)) {
        console.log(this.carNUmber, '確定按鈕')
        // this.show_chinese = false;
        this.showKeyboards = false;
        this.$emit('sendCarNumber', this.carNUmber)
        // 清空上一次輸入的車牌
        this.first = ''
        this.numArr = []
      } else {
        Toast('請輸入正確的車牌號');
      }
      this.first = ''
      this.numArr = []
      this.checkLangages=true
    }
  }

}
</script>

<style lang="less" scoped>
.keyboards {
  width: 100%;
  box-sizing: border-box;

  .keyboards_title {
    margin: .3rem .5rem;
    font-size: .35rem;
    span{
      margin-left: 5px;
      font-size: .3rem;
      color: #45b94d;
    }
  }

  .input_box {
    display: flex;
    justify-content: center;
    width: 6.5rem;
    height: .9rem;
    margin: 0 auto .5rem;
    box-sizing: border-box;

    li {
      flex: 1;
      border: 1px solid #ced0d2;
      border-radius: 4px;
      margin: 2px;
      text-align: center;
      line-height: .8rem;
      font-size: .45rem;
    }

    li:last-child {
      background-color: #9eefa4;
    }

    // 動態(tài)樣式
    .li_focus {
      border: 1px solid orange;
    }


  }

  .keySure {
    margin: auto;
    font-size: .4rem;
    width: 6.5rem;
    height: .9rem;
    text-align: center;
    line-height: .9rem;
    color: #fff;
    border-radius: .45rem;
    background-color: #333333;
  }

  .keyboards_keys {
    width: 7.5rem;
    margin: .2rem auto 0rem;
    // padding-bottom: .5rem;
    height: 5.7rem;
    background-color: rgb(211, 214, 221);

    .finish_key {
      width: 7.5rem;
      font-size: .3rem;
      // font-weight: 700;
      height: .6rem;
      line-height: .6rem;
      color: rgb(104, 105, 105);

      span {
        position: absolute;
        right: .38rem;
      }
    }

    .finish_line {
      width: 7.5rem;
      border-bottom: 1px solid rgb(178, 179, 180);
    }

    .key_box {
      ul {
        display: flex;
        justify-content: center;
        width: 7rem;
        height: .9rem;
        margin: .2rem auto .2rem;
        box-sizing: border-box;

        li {
          // flex: 1;
          width: .63rem;
          font-size: .35rem;
          // border: 1px solid red;
          background-color: #fff;
          border-radius: 5px;
          box-shadow: 1px 3px 1px #aaa;
          text-align: center;
          line-height: .78rem;
          margin: 2px;
          padding: 2px;
        }

        .del {
          width: .96rem;
          background-color: rgb(177, 183, 197);
        }

        .area {
          width: .9rem;
        }
      }
    }
  }
}
</style>

在頁面中引用(這邊只貼了引用部分的代碼,其他的根據(jù)自己的頁面去補(bǔ)充即可)文章來源地址http://www.zghlxwxcb.cn/news/detail-786224.html

<template>
......
  <van-popup v-model="showKeyboards" round position="bottom" :style="{ height: '72%' }">
     <Keyboards @sendCarNumber="getcrNumber"></Keyboards>
  </van-popup>
......
</template>


<script>
 import Keyboards from '../components/keybords/index.vue'  //引入組件
 export default{
 components:{Keyboards},
 methods:{
   getcrNumber(val) {
   const carNumberReg = /^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9掛學(xué)警港澳]$/
   if (carNumberReg.test(val)) {
     this.showKeyboards = false
     this.carNumber = val
   }
 },

}

 }


</script>

到了這里，關(guān)于Vue H5 前端自定義車牌號輸入鍵盤(支持新能源)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！