微信小程序车牌号输入组件

立即下载用AI写一个

发布时间：2021-03-08

20人 | 浏览：4621次 | 收藏 |

技术：微信小程序+车牌+输入+车牌号

运行环境：微信客户端+微信开发者工具

概述

一个小组件，用于方便用户输入车牌号码

详细

# 概述
有时候我们开发过程中会遇到需要用户输入车牌号的情况，让客户通过自带键盘输入，体验不好且容易出错，例如车牌号是不能输入O和I的，因此需要有一个自定义的键盘，让客户输入正确的车牌号

# 详细

## 效果展示
![](/contentImages/image/20210308/MBXNU0PoArctw31WfOs.gif)

## 实现思路
### 1 布局设计
```
让输入的框弹出，方便输入
<view wx:for="{{inputList}}" wx:key="*this" 
    class="{{item.type}} {{index === 1 || index === 8 ? 'border_right':''}} {{index === input_active_index ? 'input_active' : ''}}"
    bindtap="tapInput" data-index="{{index}}" data-item="{{item}}">
    {{item.value || ''}}
    </view>
    <view class="backward" bindtap="tapDel">
      <image class="icon_backward" src="/img/backward.svg"/>
    </view>

css：
.main {
  background: rgba(0, 0, 0, 0.6);
  height: 100vh;
  z-index: 999;
  position: fixed;
  top: 0px;
  width: 100%;
}

.main_panel {
  position: absolute;
  width: 100%;
  bottom: 0px;
}
```

### 2 数据设计
把合法输入的字符，列出来
```
provinceList: '京沪粤津浙苏湘渝云豫皖陕桂新青琼闽蒙辽宁鲁晋吉翼黑甘鄂赣贵川藏使'.split(''),
    numberList: '0123456789ABCDEFGHJKLMNPQRSTUVWXYZ挂港澳警领学'.split(''),
	
```

### 3 使用组件
```
在json文件中引用
{
  "usingComponents": {
    "carnum_input": "/component/carnumber_input/carnumber_input"
  }
}

定义好监听车牌输入，输入框关闭的事件，即可获取输入内容
<carnum_input 
    show="{{showCarnumInput}}" 
    bind:getCarNumber="getCarNumber"
    bind:closeCarNumberInput="closeCarNumberInput"/>

```
### 工具类介绍
viewtools.wxs 主要作用是补0，让界面好看些，如果有需要可以在这里改逻辑实现
```
module.exports = {
  // 把车牌字符串转为数组
  getCarNumberList: function (carNum) {
    var ret = '  •     ';
    if (!carNum || carNum.trim() === '' || carNum === undefined) return ret;
    var supplementNumber = 9 - carNum.trim().length;
    for(var i = 0; i < supplementNumber; i++) {
      carNum+=' '
    }
    ret = carNum;
    return ret;
  }
}
```

## 目录结构
![](/contentImages/image/20210308/d4F5qGhztWkulMBiEPB.jpg)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

微信小程序车牌号输入组件

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子

微信小程序 车牌号输入组件

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子

微信小程序车牌号输入组件