微信小程序使用車牌號輸入法

在作小程序時，作了一個關於車的項目，而後須要添加車輛信息、添加車牌號，使用車牌鍵盤輸入，當時我把這個需求給砍了，而後在添加車輛信息時，老大看到數據庫裏我亂填的車牌號，又讓我把他加上了^o^

1.效果圖

2.相關代碼

• 使用組件形式實現鍵盤輸入

組件代碼index.wxml

<view class="carPlate" wx:if="{{show}}">
  <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>
  </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="/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.css

.carPlate{
  position: fixed;
  padding: 12rpx 12rpx 30rpx;
  left: 0;
  bottom: 0;
  width: 100%;
  /* height: 150px; */
  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: space-between;
  align-items: center;
}
.wordItem{
  margin: 5rpx;
  width: 70rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  border: 1px solid #eee;
  border-radius: 10rpx;
}
.wordConfirm{
  width: 130rpx;
  color: #fff;
  background: #473af0;
}
.wordClear{
  width: 100rpx;
}
.clearImg{
  width: 60rpx;
  height: 60rpx;
  vertical-align: middle;
}

• index.js

Component({

  properties: {
    type: {
      type: Number,
      default: 1,
    },
    show: {
      type: Boolean,
      default: false,
    }
  },

  data: {
    cityKeyword1: '京滬浙蘇粵魯晉冀豫',
    cityKeyword2: '川渝遼吉黑皖鄂湘贛',
    cityKeyword3: '閩陝甘寧蒙津貴雲',
    cityKeyword4: '桂瓊青新藏港澳臺',
    keyNumber: '1234567890',
    wordList1: 'QWERTYUIOP',
    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 });
      }
    }
  }
})

3.父組件引入

• 我想實現點擊輸入後有上拉的效果，開始我想使用offset來實現的，可是下班後洗衣服想了下，不太好實現，我就想到了我之前作購物車時，有用到transform，原理差很少，我就把他用上了
• 而後就是點擊鍵盤外實現收起鍵盤，開始我想到的就是在父組件的最外層定義關閉事件，父級裏面的盒子都使用catch方法阻止冒泡，但想下阻止冒泡好像又有點不合情理，就又把阻止冒泡給去掉了
• 父組件index.wxml

<view class="container" bindtap="handlePlateConfirm">
  <view class="translateView" style="transform: translateY({{translateSpace}}px)">
    <view class="list">
      <view class="item">
        <view class="label">*車牌號碼</view>
        <view class="contentBox" catchtap="handleClick">
          <view class="inputBox" wx:if="{{carNo}}">{{carNo}}</view>
          <view class="promptText" wx:else>請輸入車牌號</view>
        </view>
      </view>
    </view>
  </view>
</view>
<car-plate show="{{showPlateInput}}" bindchange="handlePlateChange" type="{{inputType}}" bindconfirm="handlePlateConfirm" binddelete="handlePlateDelete" />

• 父組件index.js

Page({
  data: {
    carNo: '',
    translateSpace: 0,
    inputType: 1, // 車牌輸入類型，1簡稱，2數字或者字母,
    showPlateInput: false,
  },
  /* 用於點擊彈出鍵盤輸入，space爲鍵盤彈出後向上拉取的距離 */
  handleClick(e) {
    /* 150爲鍵盤的高度 */
    let space = -(e.currentTarget.offsetTop - 150);
    /* regExp用於判斷當前已輸入的車牌號是不是中文，並讓鍵盤顯示中文仍是英文輸入 */
    let regExp = /^[\u4e00-\u9fa5]+/;
    let inputType = 1;
    if(regExp.test(this.data.carNo)) {
      inputType = 2;
    }

    this.setData({
      translateSpace: space,
      showPlateInput: true,
      inputType
    })
  },
  /* 鍵盤輸入操做 */
  handlePlateChange(e) {
    let value = e.detail.value;
    let type = e.detail.type;
    let carNo = this.data.carNo;
    carNo += value;

    if(type == 1) {
      this.setData({
        inputType: 2
      })
    }
    this.setData({
      carNo
    })
  },
  /* 點擊鍵盤上的肯定 */
  handlePlateConfirm() {
    /* isCarPlate用於判斷輸入的車牌號是否符合規範 */
    if (!this.isCarPlate(this.data.carNo)) {
      wx.showToast({
        title: '請輸入正確的車牌號',
        icon: 'none',
        duration: 2000
      })
      return false;
    }
    this.setData({
      translateSpace: 0,
      showPlateInput: false,
      inputType: 1
    })
  },
  /* 用於鍵盤輸入刪除 */
  handlePlateDelete(e) {
    let carNo = this.data.carNo;
    carNo = carNo.substring(0, carNo.length - 1);
    if(carNo.length == 0) {
      this.setData({
        inputType: 1
      })
    }
    this.setData({
      carNo,
    })
  },
  /* 判斷車牌號 */
  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);
  }
})

• 父組件index.css

.container{
  height: 100vh;
  background: #fff;
}
.translateView{
  background: #eee;
}
.list{
  margin-bottom: 20rpx;
  background: #fff;
}
.list:last-child{
  margin: 0;
}
.item{
  display: flex;
  padding: 0 26rpx;
  width: 100%;
  height: 116rpx;
  box-sizing: border-box;
  align-items: center;
  border-bottom: 1px solid #eee;
}
.item:last-child{
  border: none;
}
.label{
  margin-right: 10rpx;
  width: 140rpx;
}
.contentBox{
  display: flex;
  width: calc(100% - 150rpx);
  height: 90rpx;
  align-items: center;
  justify-content: space-between;
}
.promptText{
  color: #c7c7c7;
}
.inputBox{
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
}

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

• 往期推薦：

  • 實現單行及多行文字超出後加省略號
  • 判斷iOS和Android及PC端
  • 使用vue開發移動端管理後臺
  • 畫三角形