vue实现简易车牌录入

<template>
  <div class="cph">
    <div class="cph-main" @click="isShowCpKeyBoard = true">
      <ul>
        <li
          v-for="(item, index) in cph"
          :class="index == currentIndex ? 'active' : ''"
          :key="index"
          @click="itemClick(index)"
        >
          {{ item }}
        </li>
        <li
          v-for="(item, index) in 8 - cph.length"
          :key="'empty' + index"
          :class="cph.length + index == currentIndex ? 'active' : ''"
          @click="itemClick(cph.length + index)"
        ></li>
      </ul>
    </div>
    <div id="keyboardBox" v-if="isShowCpKeyBoard">
      <div v-if="isShowSfKeyboard" class="provienceBox" id="provienceBox">
        <ul>
          <li
            v-for="(sfText, index) in keyboardBtnRows.sfTextRow1"
            :key="index"
            :class="keyBoardClickAnmt == sfText ? 'activeKey' : ''"
            @click="onKeyBoardBtn(sfText)"
          >
            {{ sfText }}
          </li>
        </ul>
        <ul>
          <li
            v-for="(sfText, index) in keyboardBtnRows.sfTextRow2"
            :key="index"
            :class="keyBoardClickAnmt == sfText ? 'activeKey' : ''"
            @click="onKeyBoardBtn(sfText)"
          >
            {{ sfText }}
          </li>
        </ul>
        <ul>
          <li
            v-for="(sfText, index) in keyboardBtnRows.sfTextRow3"
            :key="index"
            :class="keyBoardClickAnmt == sfText ? 'activeKey' : ''"
            @click="onKeyBoardBtn(sfText)"
          >
            {{ sfText }}
          </li>

          <li class="hideBtn other" @click="isShowCpKeyBoard = false">隐藏</li>
        </ul>
        <ul>
          <li class="changeContentBtn other" @click="isShowSfKeyboard = false">
            ABC
          </li>
          <li
            v-for="(sfText, index) in keyboardBtnRows.sfTextRow4"
            :key="index"
            :class="keyBoardClickAnmt == sfText ? 'activeKey' : ''"
            @click="onKeyBoardBtn(sfText)"
          >
            {{ sfText }}
          </li>

          <li
            class="deleteBtn other"
            @click="onDelCphChar"
            :class="keyBoardClickAnmt == 'del' ? 'activeKey' : ''"
          >
            删除
          </li>
        </ul>
      </div>
      <div v-else class="textBox" id="textBox">
        <ul>
          <li
            v-for="(zmText, index) in keyboardBtnRows.zmTextRow1"
            :key="index"
            :class="keyBoardClickAnmt == zmText ? 'activeKey' : ''"
            @click="onKeyBoardBtn(zmText)"
          >
            {{ zmText }}
          </li>
        </ul>
        <ul>
          <li
            v-for="(zmText, index) in keyboardBtnRows.zmTextRow2"
            :key="index"
            :class="keyBoardClickAnmt == zmText ? 'activeKey' : ''"
            @click="onKeyBoardBtn(zmText)"
          >
            {{ zmText }}
          </li>
        </ul>
        <ul>
          <li
            v-for="(zmText, index) in keyboardBtnRows.zmTextRow3"
            :key="index"
            :class="keyBoardClickAnmt == zmText ? 'activeKey' : ''"
            @click="onKeyBoardBtn(zmText)"
          >
            {{ zmText }}
          </li>
          <li class="hideBtn other" @click="isShowCpKeyBoard = false">隐藏</li>
        </ul>
        <ul>
          <li class="changeContentBtn other" @click="isShowSfKeyboard = true">
            省份
          </li>
          <li
            v-for="(zmText, index) in keyboardBtnRows.zmTextRow4"
            :key="index"
            :class="keyBoardClickAnmt == zmText ? 'activeKey' : ''"
            @click="onKeyBoardBtn(zmText)"
          >
            {{ zmText }}
          </li>
          <li
            class="deleteBtn other"
            @click="onDelCphChar"
            :class="keyBoardClickAnmt == 'del' ? 'activeKey' : ''"
          >
            删除
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>    

<script>
export default {
  name: "ChePaiHaoInput",
  props: { defaultCph: String },
  data() {
    return {
      keyboardBtnRows: {
        sfTextRow1: [
          "京",
          "津",
          "渝",
          "沪",
          "冀",
          "晋",
          "辽",
          "吉",
          "黑",
          "苏",
        ],
        sfTextRow2: [
          "浙",
          "皖",
          "闽",
          "赣",
          "鲁",
          "豫",
          "鄂",
          "湘",
          "粤",
          "琼",
        ],
        sfTextRow3: [
          "川",
          "贵",
          "云",
          "陕",
          "甘",
          "青",
          "蒙",
          "桂",
          "宁",
          "新",
        ],
        sfTextRow4: ["藏", "使", "领", "警", "学", "港", "澳"],
        zmTextRow1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
        zmTextRow2: ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
        zmTextRow3: ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
        zmTextRow4: ["Z", "X", "C", "V", "B", "N", "M"],
      },
      cph: this.defaultCph,
      isShowSfKeyboard: 0 == this.defaultCph.length - 1,
      currentIndex: this.defaultCph.length ? this.defaultCph.length - 1 : 0,
      keyBoardClickAnmt: "",
      isShowCpKeyBoard: true,
    };
  },
  methods: {
    onKeyBoardBtn(kbBtnChar) {
      if (this.currentIndex == 0) {
        this.isShowSfKeyboard = false;
      }
      this.keyBoardClickAnmt = kbBtnChar;
      setTimeout(() => {
        this.keyBoardClickAnmt = "";
      }, 200);
      this.cph[this.currentIndex] = kbBtnChar;
      if (this.currentIndex < 7) {
        this.currentIndex++;
      }
    },
    onDelCphChar() {
      this.keyBoardClickAnmt = "del";
      setTimeout(() => {
        this.keyBoardClickAnmt = "";
      }, 200);
      this.cph[this.currentIndex] = "";
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
      if (this.currentIndex == 0) {
        this.isShowSfKeyboard = true;
      }
    },
    itemClick(index) {
      this.currentIndex = index;
      if (index == 0) {
        this.isShowSfKeyboard = true;
      } else {
        this.isShowSfKeyboard = false;
      }
    },
  },
};
</script>

<style lang="scss" scope>
.cph {
  &-main {
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    ul {
      width: 100%;
      height: 0.96rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      li {
        margin-right: 0.2rem;
        width: 0.84rem;
        height: 1.1rem;
        line-height: 1.1rem;
        border: 1px solid #cccccc;
        text-align: center;
        float: left;
        border-radius: 0.1rem;

        &:last-of-type {
          margin: 0;
        }
      }
      .active {
        border: 2px solid var(--main_color);
      }
    }
  }

  #keyboardBox {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99999;
  }

  #keyboardBox .provienceBox,
  #keyboardBox .textBox {
    width: 100%;
    background-color: var(--border_color);
    padding-top: 0.14rem;
    padding-bottom: 0.14rem;

    ul {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      margin-top: 0.14rem;

      &:first-of-type {
        margin-top: 0;
      }

      li {
        width: 0.8rem;
        height: 1.1rem;
        border-radius: 0.1rem;
        text-align: center;
        line-height: 1.1rem;
        float: left;
        background-color: var(--white_color);
        border: 1px solid var(--grey_title_color3);
      }
    }
  }

  #keyboardBox .provienceBox ul .changeContentBtn,
  #keyboardBox .provienceBox ul .deleteBtn,
  #keyboardBox .textBox ul .changeContentBtn,
  #keyboardBox .textBox ul .deleteBtn,
  #keyboardBox .provienceBox ul .changeContentBtn,
  #keyboardBox .provienceBox ul .hideBtn,
  #keyboardBox .textBox ul .changeContentBtn,
  #keyboardBox .textBox ul .hideBtn {
    width: 1.1rem;
    height: 1.1rem;
    background-color: #d1d1d1;
    text-align: center;
    line-height: 1.1rem;
    font-size: 0.42rem;
  }

  #keyboardBox .provienceBox ul .deleteBtn img,
  #keyboardBox .provienceBox ul .hideBtn img,
  #keyboardBox .textBox ul .deleteBtn img,
  #keyboardBox .textBox ul .hideBtn img {
    width: 23px;
    height: 16px;
    margin: 0px;
    margin-top: 12px;
  }

  @keyframes scaleDraw {
    /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0% {
      transform: scale(1); /*开始为原始大小*/
    }
    25% {
      transform: scale(1.3); /*放大1.1倍*/
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }

  .activeKey {
    background-color: #acb3bb !important;
    /*background: var(--grey_title_color2) !important;*/
    opacity: 0.8;
    color: var(--white_color);
    -webkit-animation-name: scaleDraw; /*关键帧名称*/
    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    -webkit-animation-duration: 0.2s; /*动画所花费的时间*/
  }
}
</style>

车牌号校验：

export function validateCph(rule, value, callback) {
    var reg = /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[ABCDEFGHJK])|([ABCDEFGHJK]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领]\\d{3}\\d{1,3}[领])|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;
    if (value === undefined || value === null || value === '') {
        return true
    } else {
        if ((!reg.test(value)) && value !== '') {
            return false
        } else {
            return true
        }
    }
  }