vue车牌号码输入键盘，简单易懂

网上找了好多，都没找到合适的vue版车牌号输入键盘，就自己写了一个。

<template>
  <div class="car-number">  
    <div class="pop">
      <div class="title">
        <span v-for="(item,index) in textList" :key="index">{{item}}</span> 
        <i @click="colse" class="iconfont icon-quxiao"></i>
      </div>
      <div class="pro flx-w">
        <span v-for="(item,index) in items" :key="index" @click="add(item.text)">{{item.text}}</span>
      </div>
      <div class="pro flx-w">
        <span v-for="(item,index) in nums" :key="index" @click="add(item.num)">{{item.num}}</span>
      </div>
      <div class="pro flx-w">
        <span v-for="(item,index) in letters" :key="index" @click="add(item.let)">{{item.let}}</span>
      </div>
      <div class="pro flx-w del">
        <span v-for="(item,index) in letters02" :key="index" @click="add(item.let)">{{item.let}}</span>
      </div>
      <p @click="del()">删除 <i class="iconfont icon-tuige"></i></p>
      <div class="confirm" @click="btnCar"><span>确定</span></div>
    </div>
  </div>
</template>

import {isLicensePlate} from '@/utils/utils'
export default {
  data(){
    return {
      items: [
        {text:'京'},{text:'津'},{text:'冀'},{text:'晋'},{text:'蒙'},{text:'辽'},{text:'吉'},
        {text:'黑'},{text:'沪'},{text:'苏'},{text:'浙'},{text:'皖'},{text:'闽'},{text:'赣'},
        {text:'鲁'},{text:'豫'},{text:'鄂'},{text:'湘'},{text:'粤'},
        {text:'桂'},{text:'琼'},{text:'渝'},{text:'川'},{text:'贵'},
        {text:'云'},{text:'藏'},{text:'陕'},{text:'甘'},{text:'青'},
        {text:'宁'},{text:'新'},{text:'港'},{text:'澳'},{text:'警'},
        {text:'学'},{text:'挂'},{text:'领'},{text:'使'}
      ],
      nums:[
        {num:1},{num:2},{num:3},{num:4},{num:5},{num:6},{num:7},{num:8},{num:9},{num:0}
      ],
      letters:[
        {let: 'A'},{let: 'B'},{let: 'C'},{let: 'D'},{let: 'E'},{let: 'F'},
        {let: 'G'},{let: 'H'},{let: 'J'},{let: 'K'},
      ],
      letters02: [
        {let: 'L'},{let: 'M'},{let: 'N'},{let: 'P'},{let: 'Q'},{let: 'R'},{let: 'S'},
        {let: 'T'},{let: 'U'},{let: 'V'},{let: 'W'},{let: 'X'},{let: 'Y'},{let: 'Z'}
      ],
      textList: ['豫']
    }
  },
  methods: {
    add(td){ //添加车牌
      const reg = /[\u4e00-\u9fa5]/g //汉字
      if(this.textList.length>7){
        this.$toast('车牌号码长度错误')
      }else{
        if(this.textList!='' && this.textList[0]!='' && reg.test(td)){
          this.$toast('只能有一个归属省份')
        }else{
          this.textList.push(td)
          if(!reg.test(this.textList[0])){
              this.$toast('请先选择省份')
              this.textList = []
            }
        }
      }
    },
    del(){ //删除
      const index = this.textList.length-1
      this.textList.splice(index,1)
    },
    btnCar(){ //把车牌号传递给父组件
      let lists = this.textList.join('') //把数组转换成字符串
      let vefy = isLicensePlate(lists)
      if(vefy === false){
        this.$toast('车牌号输入错误')
      }else{
        this.$emit('btnText',lists)
        this.colse()
      }
     
    },
    colse(){  //关闭键盘
      this.$emit('btnShow',false)
    }
  },
}

<style lang="less" scoped>
  .car-number{
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 100;
     background: rgba(0,0,0,.6);
    .title{
      letter-spacing: 0.03rem;
      margin-bottom:0.2rem ;
      height: 0.7rem;
      border-bottom: 0.02rem solid #01be6e;
      span{
        font-weight: bold;
        font-size: 0.38rem;
        padding-bottom: 0.18rem;
        display: inline-block;
      }
      i{
        font-size: 0.56rem;
        color: #a8a8a8;
        display: block;
        position:absolute;
        top: 0.1rem;
        right: 0.15rem;
      }
    }
    .pop{
      position: fixed;
      bottom: 0.3rem;
      left: 0.15rem;
      right: 0.15rem;
      z-index: 1000;
      background: #fff;
      border-radius: 0.16rem;
      padding: 0.3rem 0.2rem 0.3rem 0.25rem;
      text-align: center;
      .pro>span:active{
        background: #01be6e;
        color: #fff;
      }
      .pro{
        display: flex;
        justify-content: flex-start;
        flex-wrap:wrap;
        align-items: center;
        margin: 0.1rem 0 ;
        span{
          display: inline-block;
          height: 0.55rem;
          line-height: 0.55rem;
          width: 0.55rem;
          background: #e4e4e4;
          border-radius: 0.06rem;
          text-align: center;
          margin: 0.1rem 0.06rem;
          font-size: 0.3rem;
          cursor: pointer;
          box-shadow: 0 0 0.03rem #7a7a7a;
        }
      }
      .del{
        margin-right: 25%;
        margin-top: -0.1rem;
      }
      p:active{
        background: #ff2b2bef !important;
        color: #fff !important;
        i:active{
          color: #ffffff !important;
        }
      }
      p{
          float: right;
          background: #DBDBDB;
          border-radius: 0.08rem;
          text-align: center;
          width: 26%;
          margin-top:-1.5rem ;
          margin-right: 0.12rem;
          height: 1.3rem;
          line-height: 1.3rem;
          vertical-align: middle;
          cursor: pointer;
          i{
            font-size: 0.35rem;
            color: #8a8a8a;
          }
        }
      .confirm{
        height: 0.75rem;
        line-height: 0.75rem;
        width: 100%;
        background: #01be6e;
        border-radius: 0.12rem;
        box-shadow: 0 0 0.08rem rgb(163, 163, 163);
        cursor: pointer;
        color: #fff;
        letter-spacing: 0.1rem;
        margin: 0.3rem 0 0.2rem;
      }
    }
    
  }

写的不好的对方，请大家指正！