小程序车牌输入组件

参考链接：

https://www.jianshu.com/p/f7843b647c20

https://www.jb51.net/article/167972.htm

 

使用自定义组件输入车牌号。

自定义组件：carplate

 

 组件代码：

index.js

Component({

  properties: {
   type: {
    type: Number,
    default: 1,
   },
   show: {
    type: Boolean,
    default: true,
   }
  },
 
  data: {
   cityKeyword1: '京津晋冀蒙辽吉黑沪',
   cityKeyword2: '苏浙皖闽赣鲁豫鄂湘',
   cityKeyword3: '粤桂琼渝川贵云藏',
   cityKeyword4: '陕甘青宁新',
   keyNumber: '1234567890',
   wordList1: 'QWERTYUOP军',
   wordList2: 'ASDFGHJKL警',
   wordList3: 'ZXCVBNM港澳',
 
  },
 
  methods: {
   handleClick(e) {
    let value = e.currentTarget.dataset.item;
    let type = e.currentTarget.dataset.type;
    switch(value) {
     case 'confirm':
      this.triggerEvent('confirm');
      break;
     case 'delete':
      this.triggerEvent('delete');
      break;
     default: 
      this.triggerEvent('change', { value, type });
    }
   }
  }
 })

index.json

{
  "component": true,
  "usingComponents": {}
}

index.wxml

<view class="carPlate" wx:if="{{show}}">
<slot  />

 <block wx:if="{{type==1}}">
  <view class="wordList">
   <view class="wordItem" wx:for="{{cityKeyword1}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
  </view>
  <view class="wordList">
   <view class="wordItem" wx:for="{{cityKeyword2}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
  </view>
  <view class="wordList">
   <view class="wordItem" wx:for="{{cityKeyword3}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
  </view>
  <view class="wordList">
   <view class="wordItem" wx:for="{{cityKeyword4}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
   <view class="wordItem wordConfirm" bindtap="handleClick" data-item="confirm">确定</view>
  </view>
 </block>
 <block wx:else>
  <view class="wordList">
   <view class="wordItem" wx:for="{{keyNumber}}" wx:key="{{item}}" bindtap="handleClick" data-type="2" data-item="{{item}}">{{item}}</view>
  </view>
  <view class="wordList">
   <view class="wordItem" wx:for="{{wordList1}}" wx:key="{{item}}" bindtap="handleClick" data-type="2" data-item="{{item}}">{{item}}</view>
  </view>
  <view class="wordList">
   <view class="wordItem" wx:for="{{wordList2}}" wx:key="{{item}}" bindtap="handleClick" data-type="2" data-item="{{item}}">{{item}}</view>
   <view class="wordItem wordClear" bindtap="handleClick" data-item="delete">
    <image src="/source/images/input-clear.png" class="clearImg"></image>
   </view>
  </view>
  <view class="wordList">
   <view class="wordItem" wx:for="{{wordList3}}" wx:key="{{item}}" bindtap="handleClick" data-item="{{item}}">{{item}}</view>
   <view class="wordItem wordConfirm" bindtap="handleClick" data-item="confirm">确定</view>
  </view>
 </block>
</view>

index.wxss

.carPlate{
  position: fixed;
  padding: 0 12rpx 30rpx 12rpx;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 450rpx;
  font-size: 30rpx;
  background: #fff;
  box-sizing: border-box;
  border-top: 1px solid rgb(211, 207, 207);
  z-index: 200;
 }
 .wordList{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
 }
 .wordItem{
  margin: 5rpx;
  width: 70rpx;
  height: 75rpx;
  line-height: 75rpx;
  text-align: center;
  border: 1px solid #eee;
  border-radius: 10rpx;
 }
 .wordConfirm{
  width: 130rpx;
  color: #fff;
  background: #07C160;
 }
 .wordClear{
  width: 100rpx;
 }
 .clearImg{
  width: 60rpx;
  height: 60rpx;
  vertical-align: middle;
 }

在页面中调用：

 

 页面代码：在文本框中输入车牌号，可根据自己的需求使用正则校验结果。

// pages/test/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputType: 1,
    showPlateInput: false,
    plateNo: '',
  },
 
 
  /* 点击输入车牌号 */
  plateClick: function () {
    let regExp = /^[\u4e00-\u9fa5]+/;
    let inputType = 1; 
    // 如果车牌号的第一个是汉字，则显示字母键盘
    if (regExp.test(this.data.plateNo.substring(0,1))) {
      inputType = 2;
    }
    this.setData({
      showPlateInput: !this.data.showPlateInput,
      inputType,
    })
  },
  /* 点击输入车牌 */
  handlePlateChange(e) {
    let value = e.detail.value;
    let type = e.detail.type;
    let plateNo = this.data.plateNo;
    plateNo += value;
 
    if (type == 1) {
      this.setData({
        inputType: 2
      })
    }
    this.setData({
      plateNo
    })
  },
  /* 键盘输入删除 */
  handlePlateDelete(e) {
    let plateNo = this.data.plateNo;
    plateNo = plateNo.substring(0, plateNo.length - 1);
    if (plateNo.length == 0) {
      this.setData({
        inputType: 1
      })
    }
    this.setData({
      plateNo,
    })
  },
  /* 点击键盘上的确定 或者车牌号 */
  handlePlateConfirm() {
     
    this.setData({
      showPlateInput: false,
      inputType: 1, 
    })
  },
  /* 判断车牌号 */
  isCarPlate(value) {
    return /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(value);
     
  },

  /* 关闭车牌号 */
  closePlate() {
    this.setData({
      showPlateInput: false,  
    })
  },
})

{
  "navigationBarTitleText": "输入车牌",
  "usingComponents": {
    "car-plate" : "../../components/carplate/index"
  }
}

<view style="text-align: center; margin: 20px;"> 
   <input bindtap="plateClick" data-field="carId" value="{{plateNo}}" disabled="true" placeholder="点击输入车牌号" />
</view>

<car-plate show="{{showPlateInput}}" bindchange="handlePlateChange" type="{{inputType}}" bindconfirm="handlePlateConfirm" binddelete="handlePlateDelete">
  <view class="bar-panel">
    <view class="plate-number-text" bindtap="handlePlateConfirm">{{plateNo}}</view>
    <view class="finish-btn" bindtap="closePlate">关闭</view>
  </view>
</car-plate>

.bar-panel {
    display: flex;
    position: relative;
    height: 70rpx;
}

.bar-panel .plate-number-text {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bar-panel .finish-btn {
    position: absolute;
    right: 25rpx;
    top: 0;
    color: var(--theme-color);
    font-size: 35rpx;
    line-height: 70rpx;
    float: right;
}