<template>
  <div>
    <div class="row">
      <label class="row-label" @click="clickShowKeyboard">
        <span>车牌号码</span>
        <input type="text" placeholder="请选择车牌号码" v-model="carNo" disabled="true"/>
      </label>
    </div>

    <div class="carno">
      <div class="carno-header">
        <span class="canael" @click="popupVisibleCarNo = false">取消</span>
        <span class="title">请选择车牌号</span>
        <span class="confirm" @click="confirmCarNo">确认</span>
      </div>

      <div class="carno-input">
        <div class="input-box">
          <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>
      </div>

      <!-- 英文 数字 键盘 -->
      <div class="carno-keyboard">

        <div class="plate_chinese_box" v-if="show_chinese">
          <mt-button
            v-for="(item, index) in ChineseList"
            :key="item.id"
            @click="checkChinese(index)"
          >{{item.name}}</mt-button>
        </div>

        <div class="plate_chinese_box plate_number_box" v-if="show_allBoard">
          <mt-button
            v-for="(item, index) in English_Number"
            :key="item.id"
            @click="checkEnglish_num(index)"
          >{{item.name}}</mt-button>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      carNo: '',

      show_chinese: true, // 是否显示汉字键盘
      show_allBoard: false, // 是否显示英文数字键盘
      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: 64},
        {name: '.', id: 99}
      ],
      first: '',
      numArr: []
    }
  },

  methods: {
    // 唤起键盘
    clickShowKeyboard () {
      if (!this.first) {
        this.show_chinese = true
      } else {
        this.show_chinese = false
        this.show_allBoard = true
      }
    },

    // 选择车牌号前面的汉字
    checkChinese (index) {
      // 如果点击删除键，删除第一个格的内容
      if (this.ChineseList[index].id === 99) {
        this.first = ''
      } else {
        // 把选中的字赋值给第一个格，并且切换键盘
        this.first = this.ChineseList[index].name
        this.show_chinese = false
        this.show_allBoard = true
      }
    },
    // 选择车牌号后面的数字和字母
    checkEnglish_num (index) {
      // 如果点击删除键，删除 numArr 的最后一个值
      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 内
        this.numArr.push(this.English_Number[index].name)
        // 如果 numArr 中的值超过 7 个（车牌号的最大位数），删除最后一个
        if (this.numArr.length > 7) {
          this.numArr.pop()
        }
      }
    },

    confirmCarNo () {
      if (this.first && this.numArr.length === 7) {
        let numStr = this.numArr.join('')
        this.carNo = this.first + numStr
      } else {
        this.$toast({message: '请输入正确车牌号', className: 'addClassToast', position: 'top'})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.carno{
  height: auto;
  background-color: #ffffff;

  &-header{
    width: 100%;
    height: auto;
    padding: 2vw 0;
    font-size: 4.26vw;
    color: #666666;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .canael{
      color: #000000;
    }
    .confirm{
      color: #f08800;
    }
  }

  &-input{
    height: 14vw;
    display: flex;
    justify-content: center;
    align-items: center;
    .input-box{
      width: 80vw;
      height: 10vw;
      border-radius:.4rem;
      border:1px solid rgba(206,208,210,1);
      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: 5.33vw;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #323233;
      }
      li:last-child{
        border: none;
      }
    }
  }

  &-keyboard{
    width: 100%;
    height: auto;

    .plate_chinese_box{
      background-color: #eaf1f9;
      padding: 0 2vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      button{
        width: 14%;
        height: 9vw;
        font-size: 4.6vw;
        color: #333333;
        margin: 1vw;
        background-color: #ffffff;
        box-shadow: 2px 2px 2px 2px #888888;
      }
      button:last-child{
        color: #ffffff;
        background: #ffffff url(../../../../static/images/home/WriteOrder-c.png) no-repeat center;
        background-size: 60% 72%;
      }
    }

    .plate_number_box{
      background-color: #eaf1f9;
      // padding: 0 2vw;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      button{
        width: 9%;
        height: 9vw;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1vw 0.4vw;
        box-shadow: 1px 1px 1px 1px #888888;
      }
      button:nth-child(21){
        margin-left: 4.5%;
      }
      button:nth-child(29){
        margin-right: 4.5%;
      }
      button:nth-child(30){
        margin-left: 10%;
      }
      button:nth-child(36){
        margin-right: 15%;
      }
    }
  }
}

</style>

参考：
https://www.jianshu.com/p/ee0dbbded552