Vue H5 前端自定义车牌号输入键盘(支持新能源)

项目介绍：

这个项目是基于 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>
          <!-- 数字英文 -->
          <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: "领", id: 33 },
          { name: "警", id: 34 },
          { name: "学", 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: '地区', 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;
      }
    },
    // 选择车牌后面的数字和字母
    chooseEnglish(val) {
      if (val.id === 97 || val.id === 98) {
        this.checkLangages = !this.checkLangages
      } else if (val.id === 99) {
        this.numArr.pop()

        // 如果数字,字母被删光了,则切换到中文键盘
        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 = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/
      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;
    }

    // 动态样式
    .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>

在页面中引用(这边只贴了引用部分的代码,其他的根据自己的页面去补充即可)

<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 = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/
   if (carNumberReg.test(val)) {
     this.showKeyboards = false
     this.carNumber = val
   }
 },

}

 }

</script>