## 手机端自适应车牌号自定义键盘（vue组件）

手机端自适应车牌号自定义键盘（vue组件）

代码如下：
plateKeyBoard.vue

<template>
  <transition name="fade">
    <div v-show="popupVisible"  class="yqpopup yqpopup-bottom" >
      <!--省份简称键盘-->
      <div class="area-tag-wrap"  v-if="!showNum">
        <div class="com-btn" @click="complete">完成</div>
        <div class="flex first-line">
          <span class="flex1" v-for="(item,index) in area[0]" @click="selectPlateArea(item)">{
  { item }}</span>
        </div>
        <div class="flex first-line mt-3">
          <span class="flex1" v-for="(item,index) in area[1]" @click="selectPlateArea(item)">{
  { item }}</span>
        </div>
        <div class="flex first-line mt-3">
          <span class="flex1" v-for="(item,index) in area[2]" @click="selectPlateArea(item)">{
  { item }}</span>
        </div>
        <div class="flex first-line mt-3">
          <span class="flex1" :class="{'bg-del': item == 'del','bg-yes': item == 'yes'}" v-for="(item,index) in area[3]" @click="selectPlateArea(item)">{
  { item == 'del' || item == 'yes' ? '' : item }}</span>
        </div>
      </div>
      <!--数字与字母键盘-->
      <div class="area-tag-wrap" v-if="showNum">
        <div class="com-btn" @click="complete">完成</div>
        <div class="flex first-line" v-if="plateNum.length!=0">
          <span class="flex1" v-for="(item,index) in num[0]" @click="selectOtherNum(item)">{
  { item }}</span>
        </div>
        <div class="flex first-line" v-else >
          <span class="flex1 flexWhite" v-for="(item,index) in num[0]" >{
  { item }}</span>
        </div>
        <div class="flex first-line mt-3">
          <span class="flex1" v-for="(item,index) in num[1]" @click="selectOtherNum(item)">{
  { item }}</span>