vue h5实现车牌号输入框

最新推荐文章于 2025-08-23 16:03:49 发布
原创 最新推荐文章于 2025-08-23 16:03:49 发布 · 169 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

效果图：
在这里插入图片描述

用户移动端添加车牌号，于是我们手写了一个H5车牌号软键盘，已经封装成一个组件，调用即可。

功能如上图所示，支持 8位电车车牌和7位油车车牌。

第一位是 省份，用户点击就会弹出省份软键盘；

第二位是 字母，用户点击只能输入字母；

第三、四、五、六位是字母和数字，不包含O；

第七位是 数字、字母、或者学、警之类汉字；

第八位是 电车选项。

用户点击软键盘对应的按键时会高亮，这个是后期加的，所以上图中没有展示出来。

我用的移动端是rem布局，使用插件进行转换了（转换比是1rem=100px）

完整代码如下
主文件：

<template>
  <div>
    <button @click="addCare">添加车辆</button>
    <div>车牌：{{ carNo }}</div>

    <CarInput
      :addShow="showCarInput"
      @close="showCarInput = false"
      @submit="onCarInputSubmit"
    />
  </div>
</template>
<script>
import CarInput from "../components/CarPlateInput.vue";
export default {
  name: "test",
  components: {
    CarInput,
  },
  data() {
    return {
      carNo: "",
      showCarInput: false,
    };
  },
  methods: {
    addCare() {
      this.showCarInput = true;
    },
    // 车牌弹窗回填
    onCarInputSubmit(val) {
      this.carNo = val;
      this.showCarInput = false;
    },
  },
};
</script>

车牌录入组件：

<template>
  <div class="shade-layer" v-if="addShow" @click="keyboardShow = false">
    <div class="add-content">
      <div class="add-header">
        <p>车辆信息</p>
        <span @click="$emit('close')">关闭</span>
      </div>
      <div class="form-list">
        <p>车牌号：</p>
        <div class="car-num-input">
          <div
            v-for="(item, index) in carNumList"
            :key="index"
            @click.stop="selectCarNum(index)"
            :class="
              (carIndex == index ? 'active' : '') +
                ' ' +
                (item ? 'status-key' : '')
            "
          >
            {{
              index == 0 && !item
                ? '省'
                : index == carNumList.length - 1 && !item
                ? '新能源'
                : item
            }}
          </div>
        </div>
      </div>
      <button class="submit-btn" @click="carSubmitBtn()" v-points>
        提交
      </button>
    </div>
    <!-- 车牌键盘 -->
    <div class="keyboard-layer" v-if="keyboardShow" @click.stop="">
      <div class="keyboard-header">
        <span @click="keyboardShow = false">完成</span>
      </div>
      <!-- 省份键盘 -->
      <div class="province-layer" v-if="carIndex == '0'">
        <span
          v-for="(item, index) in provinceList"
          :key="index"
          @click="keyboardBtn(item)"
          :class="activeKey == item ? 'active-hover' : ''"
          >{{ item == 'del' ? '删除' : item }}</span
        >
      </div>
      <!-- 数字字母键盘 -->
      <div class="keyboard-item" v-if="carIndex != '0'">
        <div v-if="carIndex != '1'">
          <span
            v-for="(item, index) in keyboardList[0]"
            :key="index"
            @click="keyboardBtn(item)"
            :class="activeKey == item ? 'active-hover' : ''"
            >{{ item }}</span
          >
        </div>
        <div>
          <span
            v-for="(item, index) in keyboardList[1]"
            :key="index"
            @click="keyboardBtn(item)"
            :class="
              (item == 'O' && carIndex != '1' ? 'no-btn' : '') +
                ' ' +
                (activeKey == item ? 'active-hover' : '')
            "
            >{{ item }}</span
          >
        </div>
        <div>
          <span
            v-for="(item, index) in keyboardList[2]"
            :key="index"
            @click="keyboardBtn(item)"
            :class="activeKey == item ? 'active-hover' : ''"
            >{{ item }}</span
          >
        </div>
        <div>
          <span
            v-for="(item, index) in keyboardList[3]"
            :key="index"
            @click="keyboardBtn(item)"
            :class="activeKey == item ? 'active-hover' : ''"
            >{{ item == 'del' ? '删除' : item }}</span
          >
        </div>
        <div v-if="carIndex == carNumList.length - 2">
          <span
            v-for="(item, index) in keyboardList[4]"
            :key="index"
            @click="keyboardBtn(item)"
            :class="activeKey == item ? 'active-hover' : ''"
            >{{ item }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CarPlateInput',
  props: {
    addShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        carNumber: ''
      },
      carNumList: ['', '', '', '', '', '', '', ''],
      activeKey: '',
      timeoutId: null,
      carIndex: null,
      keyboardShow: false,
      provinceList: [
        '京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘', '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '蒙', '陕', '吉', '闽', '贵', '粤', '青', '藏', '川', '宁', '琼', '使', '领', '学', '警', '挂', 'del'
      ],
      keyboardList: [
        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P'],
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        ['Z', 'X', 'C', 'V', 'B', 'N', 'M', 'del'],
        ['学', '警', '港', '澳']
      ]
    }
  },
  watch: {
    addShow(val) {
      if (!val) {
        this.formData = { carNumber: '' }
        this.carIndex = ''
        this.carNumList = ['', '', '', '', '', '', '', '']
        this.keyboardShow = false
      }
    }
  },
  methods: {
    carSubmitBtn() {
      this.formData.carNumber = ''
      for (let i in this.carNumList) {
        if (this.carNumList[i] == '' && i != this.carNumList.length - 1) {
          this.$emit('incomplete')
          return
        }
        this.formData.carNumber += this.carNumList[i]
      }
      this.$emit('submit', this.formData.carNumber)
    },
    selectCarNum(inx) {
      this.carIndex = inx
      if (!this.keyboardShow) {
        this.keyboardShow = true
      }
    },
    keyboardBtn(val) {
      this.activeKey = val
      this.activeKeyBtn()
      this.carNumList[this.carIndex] = val == 'del' ? '' : val
      if (val == 'del' && this.carIndex > 0) {
        this.carIndex--
      }
      if (val != 'del' && this.carIndex < this.carNumList.length - 1) {
        this.carIndex++
      }
      this.$forceUpdate()
    },
    activeKeyBtn() {
      if (this.timeoutId) clearTimeout(this.timeoutId)
      this.timeoutId = setTimeout(() => {
        this.activeKey = ''
      }, 300)
    }
  }
}
</script>

<style scoped lang="less">
.shade-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  .add-content {
    width: 100%;
    padding: 16px 16px 24px;
    box-sizing: border-box;
    border-radius: 16px;
    background: #fff;

    .add-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 14px;
      box-sizing: border-box;

      p {
        color: #000;
        font-family: "PingFang SC";
        font-size: 16px;
        font-weight: 700;
        line-height: 22px;
      }

      span {
        color: #3faa73;
        font-family: "PingFang SC";
        font-size: 12px;
        font-weight: 700;
        line-height: 24px;
        cursor: pointer;
      }
    }

    .form-list {
      p {
        color: #6b7280;
        font-family: "PingFang SC";
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
      }

      input {
        display: block;
        font-size: 14px;
        line-height: 20px;
        width: 100%;
        border-radius: 8px;
        border: none;
        background: #f5f7fa;
        padding: 12px 16px;
        box-sizing: border-box;
      }

      .car-num-input {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 0;
        box-sizing: border-box;

        div {
          width: 30px;
          height: 36px;
          background: rgba(0, 0, 0, 0.05);
          border-radius: 4px;
          border: 1px solid transparent;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #000;
          font-size: 14px;
          line-height: 18px;

          &:first-child {
            color: rgba(0, 0, 0, 0.5);
          }

          &:last-child {
            border: 1px dashed rgba(27, 171, 80, 0.8);
            color: rgba(0, 0, 0, 0.5);
            font-size: 8px;
          }
        }

        .active {
          border: 1px solid rgba(61, 172, 120) !important;
        }

        .status-key {
          color: #000 !important;
          font-size: 14px !important;
          line-height: 18px !important;
        }
      }
    }

    .submit-btn {
      display: block;
      width: 100%;
      border: none;
      padding: 6px 10px;
      box-sizing: border-box;
      border-radius: 52px;
      background: #3faa73;
      color: #fff;
      text-align: center;
      font-family: "PingFang SC";
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      margin-top: 24px;
    }
  }

  .keyboard-layer {
    width: 100%;
    background: #d0d5dc;
    padding: 8px 4px 16px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;

    .keyboard-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 8px 8px;
      box-sizing: border-box;

      span {
        color: #3faa73;
        font-family: "PingFang SC";
        font-size: 14px;
        font-weight: 700;
        line-height: 28px;
        cursor: pointer;
      }
    }

    .province-layer {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;

      span {
        color: #000;
        font-size: 14px;
        line-height: 28px;
        background: #fff;
        border-radius: 6px;
        padding: 6px 8px;
        box-sizing: border-box;
        margin: 2px;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
      }
    }

    .keyboard-item {
      width: 100%;

      div {
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          color: #000;
          font-size: 14px;
          line-height: 28px;
          background: #fff;
          border-radius: 6px;
          padding: 4px 10px;
          box-sizing: border-box;
          margin: 4px;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
        }
      }
    }

    .no-btn {
      color: rgba(0, 0, 0, 0.4) !important;
      pointer-events: none;
    }

    .active-hover {
      background: #b3bac7 !important;
    }
  }
}
</style>
小周同学:
关注
vue 车牌号输入专用键盘
04-19
在“vue 车牌号输入专用键盘”这个项目中，开发者设计了一个专门用于输入车牌号码的组件，它针对车牌号的特殊格式和输入需求进行了优化。 这个组件的亮点在于其自定义插槽功能，自定义插槽允许用户根据自己的需求来...
Vue H5 前端自定义车牌号输入键盘(支持新能源)
Hubery96的博客
08-12 3903
这个项目是基于 vue2+vant 写的录入车牌的键盘, 有需要的伙伴可以参考一下;
用vue封装一个h5的车牌号输入框
03-29
车牌号输入框是一个常见的H5组件，下面是一个基于Vue的车牌号输入框的示例代码： ```html export default { name: 'LicensePlate', data() { return { province: '', city: '', number: '', }...
自定义车牌键盘(vue版)
09-01
自己写的一款车牌键盘,主要针对手机端,若想用于pc端自己修改下样式 体验地址:http://tool.heimaozy.com/T/carKeyword
uniapp车牌输入 uni-plate-input-master_uniapp_uniapp车牌号_uniapp车牌输入_un
10-04
在本文中，我们将深入探讨如何在uni-app框架中实现车牌号输入功能，主要基于提供的标题“uniapp车牌输入 uni-plate-input-master_uniapp_uniapp车牌号_uniapp车牌输入_un”以及描述“uniapp中使用的车牌输入控件，弹...
css的white-space: pre
qq_51035159的博客
08-22 215
简单来说，这个组件的核心就是让用户能够粘贴任何文本内容（特别是配置文件、JSON等），并且保证粘贴的内容格式完全不变，然后可以原样发送给后端处理。- white-space: pre ：这是最关键的CSS属性，确保所有空格、制表符、换行符都被保留。- 用户粘贴的内容会完整存储在 inputJson.value 中，包括所有格式字符。- 使用Vue3的 v-model="inputJson" 实现双向数据绑定。- wrap="off" ：防止浏览器自动换行，保持原始的行结构。- 聚焦时的视觉反馈。
Vue3组件间通信入门教程：defineProps、defineEmits、defineExpose快速上手
软考鸭
08-20 332
数据传递：父组件用属性传递，子组件用接收事件通信：子组件用触发，父组件用监听方法调用：子组件用暴露，父组件用ref调用。
Vue 自定义指令
前端小巷子的博客
08-20 509
在 Vue 中，组件负责“可见”的 UI，自定义指令则负责“不可见”的底层 DOM 行为。当你需要直接操作节点、监听第三方库、或封装浏览器原生 API 时，指令往往比组件更轻量、更灵活。Vue 为自定义指令设计了五条钩子函数，覆盖从首次绑定到最终解绑的完整生存周期。
Vue3+TypeSprict+Element Plus 表单校验
BillKu的博客
08-22 282
在 Vue3 的表单校验中，trigger是用于指定 ​​ 的关键属性，它决定了校验逻辑的执行时机。
vue中动态设置class类名和style样式
qq_45089709的博客
08-20 665
Vue中动态设置class和style主要通过v-bind指令实现，支持对象语法、数组语法和计算属性。动态class通过:class绑定CSS类，对象语法最常用，能根据条件独立判断类名添加；数组语法可直接组合类名或嵌套条件判断；复杂逻辑建议使用计算属性。动态style通过:style绑定内联样式，对象语法支持驼峰或短横线属性名，值可为变量；数组语法可合并多个样式对象；计算属性适合处理复杂样式逻辑。两者的核心差异在于：class基于预定义CSS类，适合复用率高场景；style直接绑定内联样式，适合动态性强的实
【Vue✨】Vue 中的 diff 算法详解
2301_77798916的博客
08-23 371
Vue 的 diff 算法是实现高效 DOM 更新的核心机制。通过虚拟 DOM 对比新旧 VNode 树，找出最小差异进行局部更新。Vue 2 采用同层比较和双端指针优化列表更新，Vue 3 进一步引入编译时标记、静态提升和最长递增子序列算法，显著提升性能。diff 算法通过 key 值识别节点，确保准确复用，但仍需注意长列表性能优化。这一机制保证了 Vue 在数据驱动视图时的渲染效率，是框架高性能的关键所在。
基于Python的伊人酒店管理系统 Python+Django+Vue.js
杨荧的CSDN博客
08-22 604
基于Python的伊人酒店管理系统 Python+Django+Vue.js，该系统通过集成客房预订、客户管理、财务管理、市场营销等多项功能，帮助酒店实现数据的统一管理和业务流程的自动化，从而提高工作效率，优化客户体验，并为管理层提供实时的数据分析和决策支持，以适应不断变化的市场环境和客户需求
股权穿透图
hanker的博客
08-21 114
这是一个基于Vue.js和Element UI的股权穿透图组件，主要功能包括： 展示公司基本信息（名称、状态标签等） 通过D3.js渲染股权关系图谱 提供筛选功能（股东持股比例和对外投资比例范围） 支持多层级数据加载（最多3层） 组件特点： 使用Element UI的滑块控件实现范围筛选 采用异步加载方式获取股东和投资数据 包含进度追踪功能 实现了数据过滤逻辑（filterTree1/filterTree2） 代码结构清晰，包含模板、脚本和样式三部分，实现了数据可视化与交互功能。
Vue 实现可拖拽分割布局（支持左右、上下拖拽调整）
阿牛哥的博客
08-22 248
vue实现可拖拽分割布局（支持左右、上下拖拽调整）
Vue 3 +Ant Design Vue 父容器样式不影响子级，隔离
new Girl的博客
08-22 226
摘要：通过添加progress-col类并设置all:revert，精准重置了受父级样式影响的a-progress组件。该方法利用CSS优先级规则，仅针对目标区域清除继承样式，既保留了公用样式文件common.scss，又恢复了a-progress的默认渲染效果。这种局部样式重置方案比全局修改更精确，实现了最小改动解决组件样式冲突的需求。（149字）
vue实现小程序oss分片上传
最新发布
失忆蝴蝶
08-23 401
摘要：本文介绍了一种在小程序中实现大文件分片上传的方法，通过对接阿里云OSS并使用SigV4签名算法解决上传失败问题。主要内容包括：1)分片上传流程（初始化分片、并发上传、完成分片）；2)关键概念如规范化请求字符串和签名密钥派生；3)代码实现细节，包括工具函数、签名计算和XML处理；4)常见错误排查方法，如签名对比和URI处理；5)前端界面示例，支持文件选择和进度显示。该方法能有效解决200MB以上文件上传失败的问题，提高上传稳定性。
Vue3 element ui 给表格的列设置背景颜色
qq_54140719的博客
08-20 243
给element ui table表格的列设置背景颜色，不同于行设置背景颜色，列设置需要两个的回调方法，分别设置和。
Vue透传 Attributes（详细解析）2
2301_80120329的博客
08-20 353
Vue 多根节点组件必须显式绑定 $attrs 才能继承透传属性，否则会触发运行时警告。通过 v-bind="$attrs" 可将属性绑定到指定根节点。在 <script setup> 中使用 useAttrs() 或在普通 setup() 中通过上下文访问 attrs，但需注意其非响应式特性。禁用自动透传可用 inheritAttrs: false，手动控制属性传递。合理利用透传机制能简化组件设计，避免冗余 props 声明。
Vue 3 useModel vs defineModel：选择正确的双向绑定方案
前端开发-前端技术分享
08-23 936
深入解析 Vue 3.4+ 中 useModel() 的使用方法，掌握非单文件组件中实现双向数据绑定的核心技巧。包含完整代码示例、最佳实践和与 defineModel 的对比分析，助您成为 Vue 3 开发专家。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值