【vant 车牌号键盘的使用】

演示

见资源

步骤一：键盘组件构建

<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 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 {
     Toast} from 'vant';
export default {
     
    data()