微信小程序 车牌 键盘

微信小程序 车牌 键盘
如图：

源码：keyboard.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);
        }
      },
    }
  });

keyboard.json

{
    "component": true
  }

keyboard.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>
  

keyboard.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;
  }

页面中使用：

carnum.json

 "usingComponents": {
      "v-panel": "../../../components/keyboard/keyboard"
  }

carnum.wxml

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

carnum.js

//开启 地域选择键盘
 open: function () { this.setData({ isShow: true, keyBoardType: 1 }); },

 //开启 车牌选择键盘
 openInput: function () { this.setData({ isShow: true, keyBoardType: 2 });},

 //关闭键盘
 close: function () {  this.setData({ isShow: false });},
 //点击了删除
 delete: function (e) {
   var that = this
   this.setData({ plateNo: that.data.plateNo.substring(0, that.data.plateNo.length - 1) });
   this.setData({ plateNo2: that.data.plateNo2.substring(0, that.data.plateNo2.length - 1) });

   this.setData({
  plateNo:that.data.plateNo,
  Value:that.data.plateNo
})
this.setData({
  plateNo2:that.data.plateNo2,
  Values:that.data.plateNo2
})

  },

 //点击键盘
 click: function (e) {
   if(this.data.w == "w") {
    var val = e.detail;
    console.log(val)
   
    if (!val) return;
 
    //汉字 正则表达式
    var reg = new RegExp('[u4E00-u9FFF]+', 'g');
    if(val == "中") {
     this.setData({
       keyBoardType:1,
     })
     return
    } 
    if (!reg.test(val)) {
      this.setData({ territory: val,plateNo:val,
       keyBoardType:2,
     });
    
    } else {
      if (this.data.plateNo.length == 7) return;
      this.setData({ plateNo: this.data.plateNo + val });
    }
    this.setData({ Value: this.data.plateNo});
   }  else if(this.data.w == "y") {

     console.log("新能源")

     var val = e.detail;
     console.log(val)
    
     if (!val) return;
  
     //汉字 正则表达式
     var reg = new RegExp('[u4E00-u9FFF]+', 'g');
     if(val == "中") {
      this.setData({
        keyBoardType:1,
      })
      return
     } 
     if (!reg.test(val)) {
       this.setData({ territory: val,plateNo2:val,
        keyBoardType:2,
      });
     
     } else {
       if (this.data.plateNo2.length == 8) return;
       this.setData({ plateNo2: this.data.plateNo2 + val });
     }
     this.setData({ Values: this.data.plateNo2});
   }
  
 
 },

 //点击了 小键盘确认
 ok: function (e) { this.setData({ isShow: false }); },

data的w和y是点击切换新能源的 代码太多了就不贴了