停车小程序车牌键盘开发实例

做一个停车场微信小程序，支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能，为了提升用户体验，避免繁琐的输入，需要写一个键盘。

效果图如下

省份简写键盘如下:

省份简写键盘

英文简写键盘如下:

英文简写键盘

源代码

目录结构

目录结构

wxml文件内容

1.  
   <view wx:if="{{isShow}}" class="vehicle-panel" style="height:430rpx;background-color:{{backgroundColor}}">
2.  
   <!--省份简写键盘-->
3.  
   <block wx:if="{{keyBoardType === 1}}">
4.  
   <view class="vehicle-panel-row">
5.  
   <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyVehicle1}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
6.  
   </view>
7.  
   <view class="vehicle-panel-row">
8.  
   <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyVehicle2}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
9.  
   </view>
10.  
    <view class="vehicle-panel-row">
11.  
    <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyVehicle3}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
12.  
    </view>
13.  
    <view class="vehicle-panel-row-last">
14.  
    <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-last' bindtap='vehicleTap' data-value="{{item}}" wx:for="{{keyVehicle4}}" style="border:{{buttonBorder}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
15.  
    </view>
16.  
    </block>
17.  
    <!--英文键盘 -->
18.  
    <block wx:else>
19.  
    <view class="vehicle-panel-row">
20.  
    <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-number' bindtap='vehicleTap' data-value="{{item}}" wx:for="{{keyNumber}}" style="border:{{buttonBorder}}" wx:for-index="idx" wx:key="item">{{item}}</view>
21.  
    </view>
22.  
    <view class="vehicle-panel-row">
23.  
    <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyEnInput1}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
24.  
    </view>
25.  
    <view class="vehicle-panel-row">
26.  
    <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyEnInput2}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
27.  
    <view hover-class="vehicle-hover" style="border:{{buttonBorder}}" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-img'>
28.  
    <image src="https://www.kesion.com/'./delete.svg' class='vehicle-en-button-delete' bindtap='vehicleTap' data-value="delete" mode='aspectFit'>删除</image>
29.  
    </view>
30.  
    </view>
31.  
    <view class="vehicle-panel-row-last">
32.  
    <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-last' bindtap='vehicleTap' style="border:{{buttonBorder}}" data-value="{{item}}" wx:for="{{keyEnInput3}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
33.  
    <view hover-class="vehicle-hover" style="border:{{buttonBorder}}" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-ok' bindtap='vehicleTap' data-value="ok">确定</view>
34.  
    </view>
35.  
    </block>
36.  
    </view>

json文件

1.  
   {
2.  
   "component": true
3.  
   }

js文件

1.  
   Component({
2.  
    
3.  
   externalClasses: ['v-panel'],
4.  
    
5.  
   properties: {
6.  
   isShow: {
7.  
   type: Boolean,
8.  
   value: false,
9.  
   },
10.  
    buttonBorder: {
11.  
    type: String,
12.  
    value: "1px solid #ccc"
13.  
    },
14.  
    backgroundColor:{
15.  
    type: String,
16.  
    value: "#fff"
17.  
    },
18.  
    //1为省份键盘，其它为英文键盘
19.  
    keyBoardType: {
20.  
    type: Number,
21.  
    value: 1,
22.  
    }
23.  
    },
24.  
    data: {
25.  
    keyVehicle1: '陕京津沪冀豫云辽',
26.  
    keyVehicle2: '黑湘皖鲁新苏浙赣',
27.  
    keyVehicle3: '鄂桂甘晋蒙吉闽贵',
28.  
    keyVehicle4: '粤川青藏琼宁渝',
29.  
    keyNumber: '1234567890',
30.  
    keyEnInput1: 'QWERTYUIOP',
31.  
    keyEnInput2: 'ASDFGHJKL',
32.  
    keyEnInput3: 'ZXCVBNM',
33.  
    },
34.  
    methods: {
35.  
    vehicleTap: function (event) {
36.  
    let val = event.target.dataset.value;
37.  
    switch (val){
38.  
    case 'delete':
39.  
    this.triggerEvent('delete');
40.  
    this.triggerEvent('inputchange');
41.  
    break;
42.  
    case 'ok':
43.  
    this.triggerEvent('ok');
44.  
    break;
45.  
    default:
46.  
    this.triggerEvent('inputchange', val);
47.  
    }
48.  
    },
49.  
    }
50.  
    });

wxss文件

1.  
   :host {
2.  
   width: 100%;
3.  
   }
4.  
   .vehicle-panel {
5.  
   width: 100%;
6.  
   position: fixed;
7.  
   bottom: 0;
8.  
   display:flex;
9.  
   flex-direction:column;
10.  
    justify-content:center;
11.  
    z-index: 1000;
12.  
    }
13.  
    .vehicle-panel-row {
14.  
    display: flex;
15.  
    justify-content: space-between;
16.  
    align-items: center;
17.  
    }
18.  
    .vehicle-panel-row-last{
19.  
    display: flex;
20.  
    justify-content: space-between;
21.  
    align-items: center;
22.  
    }
23.  
    .vehicle-panel-row-button {
24.  
    background-color: #fff;
25.  
    margin: 5rpx;
26.  
    padding: 5rpx;
27.  
    width: 80rpx;
28.  
    height: 80rpx;
29.  
    text-align: center;
30.  
    line-height: 80rpx;
31.  
    border-radius: 10rpx;
32.  
    }
33.  
    .vehicle-panel-row-button-number {
34.  
    background-color: #eee;
35.  
    }
36.  
    .vehicle-panel-row-button-last {
37.  
    width: 90rpx;
38.  
    height: 90rpx;
39.  
    line-height: 90rpx;
40.  
    }
41.  
    .vehicle-hover {
42.  
    background-color: #ccc;
43.  
    }
44.  
    .vehicle-panel-row-button-img {
45.  
    display: flex;
46.  
    justify-content: center;
47.  
    align-items: center;
48.  
    }
49.  
    .vehicle-en-button-delete {
50.  
    width: 55rpx;
51.  
    height: 85rpx;
52.  
    }
53.  
    .vehicle-panel-ok {
54.  
    background-color: #0F4BA1;
55.  
    color: #fff;
56.  
    width: 150rpx;
57.  
    height: 80rpx;
58.  
    }

使用方式

示例

<v-panel is-show="{{isShow}}" bindok="inputOk" binddelete="inputdelete" bindinputchange="inputChange" key-board-type="{{keyBoardType}}" backgroundColor="white" />

属性

事件