Vue H5 前端自定义车牌号输入键盘(支持新能源)

项目介绍：

这个项目是基于 vue2+vant  写的录入车牌的键盘, 有需要的伙伴可以参考一下;

---

先看一下效果图:

 

这个是组件的代码,直接在页面中引用即可,车牌号的值存在carNumber里面,在确定按钮中,讲完整的carNumber传到引用的页面中即可.

<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>
        <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>