項(xiàng)目背景

公司要做一個(gè)停車(chē)場(chǎng)微信小程序，支持臨時(shí)車(chē)預(yù)支付以及支付記錄查詢(xún)等功能,其中涉及車(chē)牌輸入的功能，為了提升用戶體驗(yàn)，避免繁瑣的輸入，決定自己寫(xiě)一個(gè)鍵盤(pán)。

效果圖如下

省份簡(jiǎn)寫(xiě)鍵盤(pán)如下:

省份簡(jiǎn)寫(xiě)鍵盤(pán)

英文簡(jiǎn)寫(xiě)鍵盤(pán)如下:

英文簡(jiǎn)寫(xiě)鍵盤(pán)

源代碼

目錄結(jié)構(gòu)

目錄結(jié)構(gòu)

wxml文件內(nèi)容

1.  
   <view wx:if="{{isShow}}" class="vehicle-panel" style="height:430rpx;background-color:{{backgroundColor}}">
2.  
   <!--省份簡(jiǎn)寫(xiě)鍵盤(pán)-->
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.  
    <!--英文鍵盤(pán) -->
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='./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為省份鍵盤(pán)，其它為英文鍵盤(pán)
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" />

屬性

事件

完畢!

以上代碼僅供大家學(xué)習(xí)交流