简版车牌号vue+react版本实现

于 2024-06-20 14:23:19 发布
阅读量609 收藏 14
点赞数 28
文章标签： vue.js react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaotlantis/article/details/139831616
版权

简版车牌号

Hello，大家好，我是幕呈。

最近这两天那个开使馆牌照车的某负责人不是上热搜了，懂什么叫使馆车吗？。可笑，可悲，可叹！！！

好了，我们回归正题，趁着这个机会，给大家讲讲我们最近开发的一个输入车牌号组件，不过可惜她的车牌号输入不了，我们实现的组件针对是个人的，先来看看效果

效果演示

一共有两个页面，一个省份页面

效果演示

一个数字字母页面

效果演示

接下来我们讲讲是如何实现的,首先需要了解下车牌号的规则

车牌号的规则

普通规则

  • 规则一 号牌第一位是汉字，为省、自治区、直辖市的简称,或者是使开头
  • 规则二 号牌第二位是字母，是发牌机关代号（也可以理解为市区代号），除直辖市外，其他省份或自治区的号牌没有字母 I 和 O。
  • 规则三 号牌第三位至第七位，是车牌序号
  • 序号编码规则有三种，分别是：
    • a) 序号中的每一位都使用阿拉伯数字；
    • b) 序号中使用 1 位英文字母，其他位为阿拉伯数字，26 个英文字母中 O 和 I 不能使用
    • c) 序号中使用 2 位英文字母，其他位为阿拉伯数字，26 个英文字母中 O 和 I 不能使用

专用号牌规则【此次实现的组件功能不包括这一部分，后续会支持】

专用号牌 第七位位使用了汉字

  • 使馆汽车号牌和使馆摩托车号牌为“使”
  • 警用汽车号牌和警用摩托车号牌为“警”
  • 教练汽车号牌和教练摩托车号牌为“学”
  • 挂车号牌为“挂”
  • 香港特别行政区入出内地车辆号牌为“港”
  • 澳门特别行政区入出内地车辆号牌为“澳”

新能源规则

号牌位数为 8 位

小型新能源汽车

第三位固定为字母 "D" 或 "F",其中 D 代表纯电动，F 代表油电混动。第四位到第八位为序号，第四位可能为字母（没有字母 I 和 O），其他的皆为数字。（目前大部分车牌后五位皆为数字，第四位为字母的情况极少）

大型新能源汽车

（如公交车）第八位固定为字母 "D" 或 "F",其中 D 代表纯电动，F 代表油电混动。中间五位序号基本可以认为全是数字。（按照编规则，先排数字，才会排字母，大型新能源车比小型新能源车数量要少很多）

特殊【此次实现的组件功能不包括这一部分，后续会支持】

驻华使领馆车辆号牌

  • XXX·XXX 使（“使”字由红色变成白色、从第一位挪至最后一位）
  • 省 XXX·XX 领

在了解了具体的规则接下来进入实际开发

实现

我们是实现了 react 和 vue 版本的，这里只列举 vue 版本的代码示例

三个基础页面分别对应三个页面数据结构分别如下

  export const provinceSelect = [
    ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉'],
    ['浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
    ['川', '贵', '云', '陕', '甘', '青', '蒙', '桂'],
    [ '黑', '苏', '藏', '粤', '琼', '宁', '新','']
  ];
  export const numberAbcSelect = [
    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
    ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
    ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z'],
    ['X', 'C', 'V', 'B', 'N', 'M']
  ];

键盘按键的代码

这部分代码主要实现的是一个按钮的样式

<template>
  <section
    :class="[ TypeToStyle[type], { 'cell-disabled': props.disabled, 'cell-no-disabled': !props.disabled, 'keyboard-cell' : props.cell  } ]"
    role="button"
    @click="handleClick"
    :style="cellDivStyle"
  >
    <span  class="cell-text" :style="cellTextStyle">{{ props.cell }}</span>
  </section>
</template>

<script setup lang="ts">
  import { defineProps, StyleValue } from 'vue';
  // Define props
  const props = defineProps<{
    cell: String;
    disabled?: Boolean;
    type: 'province' | 'normal' | 'number' | 'character';
    onClick: Function;
    cellTextStyle?: StyleValue;
    cellDivStyle?: StyleValue;
  }>();
  // Object mapping cell type to CSS class
  const TypeToStyle = {
    province: 'province-cell',
    character: 'character-cell',
    normal: 'normal-cell',
    number: 'number-cell'
  };

  // Handle click event
  const handleClick = () => {
    if (!props.disabled && typeof props.onClick === 'function' && props.cell) {
      props.onClick(props.cell);
    }
  };
</script>

<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'KeyCell',
    // 组件的其余逻辑...
  });
</script>

省/直辖市的代码页面

这部分代码主要实现的是省/直辖市页面以及交互, 这里简称为第一屏Page1

<template>
  <article class="keyboard-container">
    <section v-for="(row, index) in props.firstScreen" :key="index" class="keyboard-row">
      <KeyCell
        v-for="province in row"
        :key="province"
        :cell="province"
        :onClick="() => handleEnter(province)"
        :cellTextStyle="cellTextStyle"
        :cellDivStyle="cellDivStyle"
        type="province"
      />
    </section>
  </article>
</template>

<script setup lang="ts">
import { defineProps, StyleValue } from 'vue';

const props = defineProps<{
  firstScreen: string[][];
  secondScreen: string[][];
  value: string;
  cellTextStyle?: StyleValue;
  cellDivStyle?: StyleValue;
}>();
const emit = defineEmits([ "handleEnter", "handleDelete" ]);
const handleEnter = (cell:string) => {
  emit('handleEnter', cell);
}
</script>
<script lang="ts">
    import { defineComponent } from 'vue';
    import KeyCell from './KeyCell.vue';
    export default defineComponent({
      name: 'RenderProvinceSelect',
      components: {
        KeyCell,
        
      },
      // 组件的其余逻辑...
    });
  </script>

<!-- 在这里添加样式 -->

字母数字键盘代码

这部分代码主要实现的是字母数字页面以及交互, 这里简称为数字屏Page2

<template>
  <article class="keyboard-container keyboard-container-noprovince">
    <section v-for="(row, index) in secondScreen" :key="index" class="keyboard-row">
        <KeyCell
          v-for="(cell, ind) in row" :key="ind"
          :cellTextStyle="cellTextStyle"
          :cellDivStyle="cellDivStyle"
          :cell="cell"
          @click="() => handleEnter(cell)"
          :disabled="!judgeInput(cell, type)"
          :type="index === 4 ? 'character' : 'normal'"
        />
      <!-- 在最后一行添加返回按钮 -->
      <template v-if="index === 3">
        <!-- 渲染返回按钮 -->
        <RenderBackBtn
          :value="value"
          @handleDelete="handleDelete"
        />
        <RenderDoneBtn
          :value="value"
          @handleDone="handleDone"
        />
      </template>
    </section>
  </article>
</template>

<script setup lang="ts">
import { defineProps, StyleValue } from 'vue';
import { judgeInput, secondScreenType } from './utils'
const props = defineProps<{
  cellTextStyle?: StyleValue;
  cellDivStyle?: StyleValue;
  secondScreen: string[][];
  type: secondScreenType;
  value: string;
}>();
const emit = defineEmits([ "handleEnter", "handleDelete", "handleDone" ]);
const handleEnter = (cell:string) => {
  emit('handleEnter', cell);
}
const handleDelete = () => {
  emit('handleDelete');
}
const handleDone = () =>{
  emit('handleDone');
}
</script>
<script lang="ts">
    import { defineComponent } from 'vue';
    import KeyCell from './KeyCell.vue';
    import RenderBackBtn from './renderBackBtn.vue';
    import RenderDoneBtn from './renderDoneBtn.vue';

    export default defineComponent({
      name: 'renderNumberABCSelect',
      components: {
        KeyCell,
        RenderBackBtn,
        RenderDoneBtn
      },
      // 组件的其余逻辑...
    });
  </script>

以上是两个主要页面的代码，除了其包含有页面渲染逻辑之外，在键盘组件中还通过父组件传入的disabled值控制键盘是否可点击

这里就不在详细的阐述了，主要说下页面的整体交互逻辑

主页面交互逻辑

首先在页面初始化的状态下显示的是Page1, 当点击了Page1中的省/直辖市按钮之后，会切换到Page2页面,而根据Page1页面中点击的词来决定Page2页面中应该显示什么内容，这就要用到我们的规则列表了，第二位要显示的是各地车辆号牌机关代号, 我们这一版本是全部的字母，这个后续可以针对单独的省出具体的准确的机关代号，以下是规则列表

export const rules: RulesType = {
  京: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  津: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  冀: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  晋: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  蒙: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  辽: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  吉: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  黑: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  沪: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  苏: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  浙: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  皖: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  闽: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  赣: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  鲁: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  豫: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  鄂: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  湘: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  粤: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  桂: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  琼: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  渝: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  川: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  贵: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  云: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  藏: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  陕: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  甘: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  青: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  宁: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
  新: {
    rule: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  },
};

用户会依次输入3-7/8位车牌号，我们会根据前面输入的数字、字母来判断下一位是什么数字/字母, 下边是安位次设置的规则

export const getRuleConfig = (key: string) => { // key 省/直辖市
  return [
    [
      rules[key]?.rule, // 机关代号
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // 第3位
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // 第4位
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // 第5位
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // 第6位
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // 第7位
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789' // 第8位
    ]
  ];
};

目前实现的逻辑是除了第一位和第二位有控制之外，其余的都是可以输入数字和字母的，如果你想要专门针对输入新能源规则的车牌号增加输入校验，拓展新增规则就OK，比如说


export const getRuleConfig = (key: string) => {  // key 省/直辖市
  return [
    [
      rules[key]?.rule, // 机关代号
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // 第3位
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // 第4位
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // 第5位
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // 第6位
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // 第7位
    ],
    [ // 新能源规则
      rules[key]?.rule,                         // 机关代号
      '0123456789',                             // 第3位
      '0123456789',                             // 第4位
      '0123456789',                             // 第5位
      '0123456789',                             // 第6位
      '0123456789',                             // 第7位
      'ABCDEFGHJK',                             // 第8位
    ],
    [ // 新能源规则
      rules[key]?.rule,                         // 机关代号
      'ABCDEFGHJK',                             // 第3位
      '0123456789',                             // 第4位
      '0123456789',                             // 第5位
      '0123456789',                             // 第6位
      '0123456789',                             // 第7位
      '0123456789',                             // 第8位
    ],
  ];
};

在这个过程中每输入一位就会根据配置的规则对下一位要输入的内容进行计算，计算完成之后对应的页面只显示下一位可以显示的内容，该计算通过judgeRules方法来实现该项功能 

const judgeRules = ({ key, len, currentValue }: any): string => {
    const provinceArr = (defaultConfig as DefaultConfig)[key] || [];
    const arr: string[] = [];
    const newArr: string[] = [];
    provinceArr?.forEach((item) => {
      arr.push(item[len]);
      if (len > 0) {
        let flag = false;
        currentValue
          ?.slice(1)
          ?.split('')
          ?.forEach((ites:string, ind:number) => {
            if (item[ind] && item[ind].indexOf(ites) === -1) {
              flag = true;
            }
          });
        if (!flag) {
          newArr.push(item[len]);
        }
      }
    });
    const rules = mergeAndRemoveDuplicates(newArr?.length > 0 ? newArr : arr);
    return rules;
  };

 

到这里基本上把我们实现一个简易的车牌号输入逻辑说清楚了，后续我们会在此基础上，将规则细化，准确化。

附录

项目的git地址： github.com/afu-fe/afu-…

参考项目： github.com/LiuuY/vehic…

文章转自：https://juejin.cn/post/7382121812433911834 

前端77
关注
  • 28
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 实现车牌键盘的示例代码
10-15
主要介绍了React 实现车牌键盘的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前端车牌号的虚拟键盘实现
weixin_42369612的博客
12-24 929
车牌号的虚拟键盘实现 直接上代码吧,逻辑不复杂,就是繁琐 component组件: import React, { Component } from 'react'; import { Icon } from 'components'; class LicensePlate extends Component { constructor(props) { super(props); this.state = { value: this.prop
React实现车牌号输入
weixin_46108101的博客
09-20 1198
汽车车牌号输入功能实现
react-native实现车牌号码输入组件
weixin_45625609的博客
04-15 526
react-native实现的车牌号码输入组件
基于Vue3和anta的拖拽模态框组件实现车牌号输入功能
weixin_61662162的博客
09-14 867
创建一个拖拽模态框组件，其中包含一个显示车牌键盘的区域和一个确定按钮。使用Ant Design Vue组件库的DragModal组件来实现拖拽功能，并设置相关样式。在车牌键盘区域内，使用Vue的v-for指令遍历键盘按键，并为每个按键添加点击事件。在确定按钮上添加点击事件，用于提交输入的车牌号。使用Vue的响应式数据机制，监听车牌号的变化，并在变化时更新视图。
taro小程序车牌号输入组件，含新能源,代码附上
最新发布
a18328561615的博客
11-22 287
taro小程序，react语法车牌号输入组件
electron框架+打包vue+react 成exe 安装下一步客户端桌面程序
08-28
`Vue.js`和`React.js`是两种广泛使用的前端框架，它们都可以与`Electron`结合，以构建用户界面。`Vue.js`以其简洁的API和易于学习的特性受到喜爱，而`React.js`则因其组件化开发模式和强大的生态系统而备受推崇。将`...
十分精美自适应的HTML+React+Vue模版套件
05-04
提供支持的 React 和 Vue 的可访问、交互式示例,超过 500 多个经过专业设计、完全响应、专业制作的组件示例，您可以将其放入项目中，并根据自己的喜好进行定制。每个示例都是完全响应式的，并且经过精心设计和实施，...
2023前端vue+react最全面试题和答案汇总
02-09
内容概要：2023前端vue+react最全面试题汇总，前端知识点全部覆盖，保你面试无忧。 适合人群：最近在准备面试，具备一定编程基础，工作1-3年的研发人员， 题目举例：1、说说vue动态权限绑定渲染列表（权限列表渲染）...
vue+react+算法前端面试.7z
04-07
在IT行业中，前端开发是至关重要的领域，涵盖了各种技术栈，包括Vue.js、React以及算法。这些技术在构建现代Web应用程序中发挥着核心作用。本文将深入探讨Vue、React和算法这三个关键知识点，并结合给定的压缩包文件...
vehicle-plate-keyboard:中国车牌号键盘 for React ，自动匹配省份 + 字母（无 IO） 数字 + 「港澳学警领」和新能源车牌
05-13
车用键盘 用于React的中文车牌键盘（不是真正的键盘，只是模态键盘） React实现的车牌键盘。 :light_bulb: 特征 省份+字母（无I / O）/数字+“港澳学警领” :automobile: 演示版 :camera: 屏幕截图 :package: 安装 yarn add vehicle - plate - keyboard :hammer: 用法 import LicenseKeyboard from 'vehicle-plate-keyboard' ; import 'vehicle-plate-keyboard/dist/main.css' ; ... < LicenseKeyboard xss=removed xss=removed xss=removed> setState ( { value } ) } value = { state . value } done = {
VehicleTextInput:ReactNative车牌号输入框及自定义键盘
05-28
VehicleTextInput ReactNative车牌号输入框及自定义键盘
vue车牌号输入键盘.zip
08-13
vue项目中的输入车牌号，支持中间的车牌号随意更改，支持新能源汽车。样式更改比较简单，将键盘封装成组件，引入到项目中就行，图片放img 里了，路径需要自己调整。
车牌号码专用键盘基于vuejs
08-10
车牌号码专用键盘 - 基于vue.js
尚硅谷前端全套视频代码vue+react
10-07
尚硅谷前端全套视频代码/微信小程序/HTML5/JS/jQuery/vue/react视频教程
Android自定义输入车牌号,React Native 自定义键盘之输入车牌号
weixin_36299472的博客
05-26 603
自定义键盘-车牌号 React-Native版(0.1)简介这是一个用React-Native写的车牌号输入界面，使用了React-Native 0.55.4版本。遵循ES6语法。主要实现了车牌号输入界面、自定义车牌号键盘，所有功能都是用JavaScript写的，iOS和Android全适配。这个组件是从隧e通APP抽出，隧e通APP是纯RN商业项目，包含热更新，微信、支付宝、各渠道银行支付，地图...
html 车牌号键盘,React 实现车牌键盘的示例代码_放手_前端开发者
weixin_39588223的博客
06-09 641
vehicle-plate-keyboardReact 实现的车牌键盘。https://github.com/LiuuY/vehicle-plate-keyboard???? Features省份 + 字母/数字 + ‘港澳学警领’新能源车牌自动判断当前位置可输入字符类型???? DemoDemo???? Screenshots???? Installationyarn add vehicle-plate-keyboar...
vue3 + ts +react
11-15
根据提供的引用内容，似乎您想了解如何在Vue3中使用TypeScript和React。Vue3和React是两个不同的框架，不能同时使用。如果您想在Vue3中使用TypeScript，可以按照以下步骤进行操作： 1.安装Vue CLI并创建一个新项目： ```shell npm install -g @vue/cli vue create my-project ``` 2.在创建的Vue项目中安装TypeScript： ```shell cd my-project vue add typescript ``` 3.现在您可以在Vue3项目中使用TypeScript了。例如，在Vue组件中使用TypeScript： ```typescript <template> <div>{{ message }}</div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ data() { return { message: 'Hello World!' } } }) </script> ``` 如果您想在Vue3中使用React，可以使用Vue3的Composition API来实现。以下是一个使用Vue3和React的示例： ```typescript <template> <div> <h1>{{ title }}</h1> <ReactComponent :message="message" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' import { createApp } from 'vue' import React from 'react' import ReactDOM from 'react-dom' const ReactComponent = defineComponent({ props: { message: { type: String, required: true } }, mounted() { const el = document.createElement('div') document.body.appendChild(el) ReactDOM.render(<div>{this.message}</div>, el) } }) export default defineComponent({ setup() { const title = ref('Vue3 + React') const message = ref('Hello World!') return { title, message } }, components: { ReactComponent } }) </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值