项目背景公司要做一个停车场微信小程序,支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能,为了提升用户体验,避免繁琐的输入,决定自己写一个键盘。 效果图如下省份简写键盘如下: 省份简写键盘 英文简写键盘如下: 英文简写键盘 源代码目录结构目录结构 wxml文件内容<view wx:if="{{isShow}}" class="vehicle-panel" style="height:430rpx;background-color:{{backgroundColor}}"> <block wx:if="{{keyBoardType === 1}}"> <view class="vehicle-panel-row"> <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> <view class="vehicle-panel-row"> <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> <view class="vehicle-panel-row"> <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> <view class="vehicle-panel-row-last"> <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> <view class="vehicle-panel-row"> <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> <view class="vehicle-panel-row"> <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> <view class="vehicle-panel-row"> <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> <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'> <image src='./delete.svg' class='vehicle-en-button-delete' bindtap='vehicleTap' data-value="delete" mode='aspectFit'>删除</image> <view class="vehicle-panel-row-last"> <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> <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>
json文件
js文件 externalClasses: ['v-panel'], keyEnInput1: 'QWERTYUIOP', keyEnInput2: 'ASDFGHJKL', vehicleTap: function (event) { let val = event.target.dataset.value; this.triggerEvent('delete'); this.triggerEvent('inputchange'); this.triggerEvent('inputchange', val);
wxss文件 justify-content: space-between; justify-content: space-between; .vehicle-panel-row-button { .vehicle-panel-row-button-number { .vehicle-panel-row-button-last { .vehicle-panel-row-button-img { .vehicle-en-button-delete { background-color: #0F4BA1;
使用方式示例<v-panel is-show="{{isShow}}" bindok="inputOk" binddelete="inputdelete" bindinputchange="inputChange" key-board-type="{{keyBoardType}}" backgroundColor="white" />
属性属性名称 | 类型 | 默认值 | 说明 |
---|
isShow | 布尔(boolean) | false | 控制键盘是否显示,true显示,false不显示 | buttonBorder | 字符串(String) | "1px solid #ccc" | 控制键盘按钮边框,同css border属性 | backgroundColor | 字符串(String) | #fff | 控制键盘背景色,同css | keyBoardType | 数字(Number) | 1 | 控制键盘显示类型,1为省份简写,2为英文简写 |
事件事件名称 | 触发情况 | 返回值 |
---|
delete | 删除按钮按下的时候触发 | 微信事件 | ok | 确定按钮按下时触发 | 微信事件 | inputchange | 输入按钮按下或者删除按钮按下时触发 | 输入的值 |
完毕!以上代码仅供大家学习交流 相关推荐: 在微信小程序中使用“随机键盘”
|