微信小程序车牌键盘

最新推荐文章于 2025-10-04 12:08:06 发布

原创

最新推荐文章于 2025-10-04 12:08:06 发布 · 516 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #html #javascript

本文介绍了如何在微信小程序中创建一个车牌号输入键盘组件，包括新建carKeyboard组件的步骤和使用方法，支持新能源车牌号输入。参考了两种不同的键盘展示形式，并提供了组件的相关文件配置。

最近一个项目用到输入车牌号的功能，给网上看了不少，然后自己优化了一下，支持新能源车牌号

参考地址1：弹框展示形式
 参考地址2：纯键盘，不带输入框
展示样式
省份车牌
在这里插入图片描述

在这里插入图片描述

1.在components目录下新建carKeyboard组件

carKeyboard.wxml


<!-- 输入框 -->
<view class="modal-content" wx:if="{
    
    {keyType == 'onlyipt' || keyType == 'iptboard'}}">
    <view class="board-input">
        <block wx:for="{
    
    {8}}" wx:key="index">
            <view data-index="{
    
    {index}}"  class="input {
    
    {selectInputIndex===index?'activeInput':''}}"  bindtap='inputCarNum'>
                <text>{
  
  {carNumArr[index] || ''}}</text>
            </view>
        </block>
        <view class="line"></view>
    </view>
</view>

<!-- 车牌 -->
<view class='keyboard' wx:if="{
    
    {keyType == 'keyborad' || keyType == 'iptboard'}}">
  <!-- 省键盘 -->
  <view class="provinces" hidden='{
    
    {hiddenPro}}'>
    <view class="pro-li fl" wx:for="{
    
    {provinceArr}}" wx:key="index" catchtap='proTap' data-province="{
    
    {item}}">{
  
  {item}}</view>
  </view>
  <!-- 号码键盘	 -->
  <view class="keyNums" hidden='{
    
    {hiddenStr}}'>
    <view  wx:if="{
    
    {selectInputIndex===1}}" class="row numRow">
      <view  class="pro-li  disabled"  wx:for="{
    
    {numArr}}"  wx:key="index" data-str="{
    
    {item}}">{
  
  {item}}</view>
    </view>
    <view wx:else class="row numRow">
        <view  class="pro-li " wx:for="{
    
    {numArr}}"  wx:key="index" catchtap='strTap' data-str="{
    
    {item}}">{
  
  {item}}</view>
    </view>
    <<