微信小程序車牌鍵盤

項目背景

公司要做一個停車場微信小程序，支持臨時車預支付以及支付記錄查詢等功能,其中涉及車牌輸入的功能，為了提升用戶體驗，避免繁瑣的輸入，決定自己寫一個鍵盤。

效果圖如下

省份簡寫鍵盤如下:

英文簡寫鍵盤如下:

源代碼

目錄結構

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>
    <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>
    <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>
    <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>
  </block>
  <!--英文鍵盤  -->
  <block wx:else>
    <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>
    <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>
    <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>
    </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' 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>
    </view>
  </block>
</view>

json文件

{
  "component": true
}

js文件

Component({

  externalClasses: ['v-panel'],

  properties: {
    isShow: {
      type: Boolean,
      value: false,
    },
    buttonBorder: {
      type: String,
      value: "1px solid #ccc"
    },
    backgroundColor:{
      type: String,
      value: "#fff"
    },
    //1為省份鍵盤，其它為英文鍵盤
    keyBoardType: {
      type: Number,
      value: 1,
    }
  },
  data: {
    keyVehicle1: '陝京津滬冀豫雲遼',
    keyVehicle2: '黑湘皖魯新蘇浙贛',
    keyVehicle3: '鄂桂甘晉蒙吉閩貴',
    keyVehicle4: '粵川青藏瓊寧渝',
    keyNumber: '1234567890',
    keyEnInput1: 'QWERTYUIOP',
    keyEnInput2: 'ASDFGHJKL',
    keyEnInput3: 'ZXCVBNM',
  },
  methods: {
    vehicleTap: function (event) {
      let val = event.target.dataset.value;
      switch (val){
        case 'delete':
          this.triggerEvent('delete');
          this.triggerEvent('inputchange');
        break;
        case 'ok':
          this.triggerEvent('ok');
        break;
        default:
          this.triggerEvent('inputchange', val);
      }
    },
  }
});

wxss文件

:host {
  width: 100%;
}
.vehicle-panel {
  width: 100%;
  position: fixed;
  bottom: 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  z-index: 1000;
}
.vehicle-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vehicle-panel-row-last{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vehicle-panel-row-button {
  background-color: #fff;
  margin: 5rpx;
  padding: 5rpx;
  width: 80rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
}
.vehicle-panel-row-button-number {
  background-color: #eee;
}
.vehicle-panel-row-button-last {
  width: 90rpx;
  height: 90rpx;
  line-height: 90rpx;
}
.vehicle-hover {
  background-color: #ccc;
}
.vehicle-panel-row-button-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vehicle-en-button-delete {
  width: 55rpx;
  height: 85rpx;
}
.vehicle-panel-ok {
  background-color: #0F4BA1;
  color: #fff;
  width: 150rpx;
  height: 80rpx;
}

使用方式

示例

<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	輸入按鈕按下或者刪除按鈕按下時觸發	輸入的值

## 完畢!

以上代碼僅供大家學習交流