微信小程序 自定义车牌键盘 + 数字键 组件

项目 需要输入车牌 方便快捷 因此 自定义车牌键盘

首先在小程序项目下 创建文件夹 components/keyboard

组件 wxml 文件 下

<view class='mask no-bg' wx:if="{{masker && show}}" bindtap='_onHide'></view>
<view class='popup {{show ? "popup-enter" : ""}}'>
  <!-- 车牌键盘start -->
  <view wx:if="{{kbType == 'plate'}}">
    <view class='kb-pro' wx:if="{{!str}}">
      <view class="vw">
        <block wx:for="{{provArr}}" wx:key="index">
          <button class="btn" data-i="{{item}}" bindtap='_onKey' wx:if="{{index <= 9}}" hover-class="hover-class">{{item}}</button>
        </block>
      </view>
      <view class="vw">
        <block wx:for="{{provArr}}" wx:key="index">
          <button class="btn" data-i="{{item}}" bindtap='_onKey' wx:if="{{index >= 10 && index <= 18}}" hover-class="hover-class">{{item}}</button>
        </block>
      </view>
      <view class="vw">
        <block wx:for="{{provArr}}" wx:key="index">
          <button class="btn" data-i="{{item}}" bindtap='_onKey' wx:if="{{index >= 19 && index <= 26}}" hover-class="hover-class">{{item}}</button>
        </block>
      </view>
      <view class="vw">
        <block wx:for="{{provArr}}" wx:key="index">
          <button class="btn" data-i="{{item}}" bindtap='_onKey' wx:if="{{index > 26}}" hover-class="hover-class">{{item}}</button>
        </block>
      </view>
    </view>
    <view class='fx fw kb' wx:else>
      <block wx:for="{{numArr}}" wx:key="index">
        <button class="btn" data-i="{{item}}" disabled='{{str.length < 2}}' bindtap='_onKey' hover-class="hover-class">{{item}}</button>
      </block>
      <block wx:for="{{lettArr}}" wx:key="index">
        <button class="btn" data-i="{{item}}" disabled='{{(index == 25 || index == 26) && (str[0] + str[1] != "粤Z")}}' bindtap='_onKey' hover-class="hover-class">{{item}}</button>
      </block>
    </view>
    <button class='fx jc-cnt btn-del ab' data-i="-1" bindtap='_onKey' hover-class="hover-class">
    </button>
  </view>
  <!-- 车牌键盘end -->

  <!-- 纯数字键盘start -->
  <view class='fx jc-fe fw kb num-only' wx:if="{{kbType == 'num' || kbType == 'num_dot'}}">
    <block wx:for="{{numArr}}" wx:key="index">
      <button class="btn" data-i="{{item}}" bindtap='_onKey' hover-class="hover-class">{{item}}</button>
    </block>
    <button class='fx jc-cnt btn bg-ad' data-i="-1" bindtap='_onKey' hover-class="hover-class">
    </button>
  </view>
  <!-- 纯数字键盘end -->
</view>

组件js文件下

Component({
  options: {
    styleIsolation: 'apply-shared'
  },

  properties: {
    param: {
      type: Object,
      value: {}
    }
  },

  data: {
    show: false,
    masker: true,
    kbType: 'num', // 纯数字: num; 车牌: plate; 支付: pay
    max: 8,
    str: '',
    numArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
    lettArr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '学', '港', '澳'],
    provArr: ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '川', '贵', '云', '渝', '藏', '陕', '甘', '青', '宁', '新']
  },

  methods: {
    toggle(elem) {
      let elm = this.data[elem]
      this.setData({
        [elem]: !elm
      })
    },
    show() {
      this.init()
    },
    hide() {
      this.setData({
        show: false
      })
    },
    init() {
      let param = this.properties.param || {}
      let provArr = this.data.provArr
      let numArr = this.data.numArr
      this.setData({
        show: true,
        masker: param.masker !== undefined ? param.masker : true,
        kbType: param.kbType || 'num',
        max: param.max || 8,
        str: (param.str + '') || ''
      })
      if (param.kbType == 'park' && provArr.indexOf('临') == -1) {
        provArr.push('临')
        this.setData({
          provArr: provArr
        })
      }
      if ((param.kbType == 'pay' || param.kbType.indexOf('dot') != -1) && numArr.indexOf('.') == -1) {
        numArr.push('.')
        this.setData({
          numArr: numArr
        })
      }
    },
    inpValid(val, cb) {
      let str = this.data.str || ''
      let list = str.split('.') || []
      if (val == '.' && !str) {
        console.warn("输入框为空，不能输入'.'")
      } else if (val == '.' && str.indexOf('.') != -1) {
        console.warn("输入框内容已含有'.'，不能再输入'.'")
      } else if (val != -1 && typeof list[1] !== 'undefined' && list[1].length > 1) {
        console.warn("小数点已有后两位，则不能输入")
      } else if (val != -1 && !isNaN(val) && str == '0') {
        console.warn("已输入0，则不能再连续输入数字，只能输入'.'小数点")
      } else {
        cb && cb()
      }
    },
    _onKey(e) {
      let str = this.data.str || ''
      let max = this.data.max || 8
      let i = e.currentTarget.dataset.i
      if (i == 'cfm') {
        this.hide()
        return
      }
      this.inpValid(i, () => {
        if (i == '-1') {
          this.setData({
            str: str.substr(0, str.length - 1)
          })
          str = this.data.str
        } else if (str.length < max) {
          this.setData({
            str: str + i
          })
          str = this.data.str
        }
        this.triggerEvent('keyEvt', str)
      })
    },
    _onHide() {
      this.hide()
      this.triggerEvent('hideEvt')
    }
  }
})

组件wxss文件下

.popup {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  overflow: hidden;
  position: fixed;
  left: 0;
  bottom: -500rpx;
  z-index: 999;
  transform: rotate(0deg) scale(1) translate(0%, 0%);
  -webkit-transform: rotate(0deg) scale(1) translate(0%, 0%);
  transition: All 0.4s ease;
  -webkit-transition: All 0.4s ease;
}

.popup-enter {
  transform: rotate(0deg) scale(1) translate(0%, -500rpx);
  -webkit-transform: rotate(0deg) scale(1) translate(0%, -500rpx);
}

.kb,
.kb-pro,
.kb-pay {
  background: #F2F2F5;
  padding: 16rpx 14rpx 12rpx;
  font-size: 32rpx;
  text-align: center;
}

.kb .btn,
.kb-pro .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9%;
  height: 86rpx;
  line-height: 86rpx;
  color: #393b3f;
  background: #fff;
  border: 0;
  margin: 0 .5% 10rpx;
  padding-left: 0;
  padding-right: 0;
}

.kb-pro>.vw {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb-pay .btn {
  width: 168rpx;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 40rpx;
  font-weight: 600;
  color: #393B3F;
  background-color: #fff;
  margin: 16rpx 16rpx 0 0;
  border-radius: 6rpx;
}

.kb-pay .btn.cfm {
  height: 290rpx;
  line-height: 290rpx;
  font-size: 32rpx;
  color: #fff;
  background-color: #4D6AFF;
}

.kb-pay .btn:nth-of-type(10) {
  width: 352rpx;
}

.kb-pay .icon-del {
  width: 36rpx;
  height: 30rpx;
}

.hover-class {
  background: rgba(70, 48, 48, 0.5) !important;
}

.btn-del {
  width: 130rpx;
  height: 86rpx;
  background: #adb4bd !important;
}

.btn-del.ab {
  position: absolute;
  right: 14rpx;
  bottom: 20rpx;
}

.btn-del.hover-class {
  background: rgba(173, 180, 189, 0.5) !important;
}

.icon-del {
  width: 50rpx;
  height: 34rpx;
}

/* 纯数字键盘 */

.num-only {
  height: 400rpx;
}

.num-only>.btn {
  width: 31%;
  margin-left: 1%;
  margin-right: 1%;
}
/* flex */

.fx {
  display: flex !important;
  align-items: center;
}

.fx-one> .vw {
  flex: 1;
}

.jc-sb {
  justify-content: space-between !important;
}

.jc-sr {
  justify-content: space-around !important;
}

.jc-cnt {
  justify-content: center !important;
}

.jc-fs {
  justify-content: flex-start !important;
}

.jc-fe {
  justify-content: flex-end !important;
}

.ai-fs {
  align-items: flex-start !important;
}

.ai-fe {
  align-items: flex-end !important;
}

.fd-cl {
  flex-direction: column !important;
}

.fw {
  flex-wrap: wrap !important;
}

/* 遮罩 */

.mask {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: fixed;
  z-index: 600;
  left: 0;
  top: 0;
}

.mask {
  background: rgba(0, 0, 0, 0.6);
}

.mask.no-bg {
  background: none;
}

一 . 键盘 - 车牌键盘使用

在组件中

1. wxml 文件下

<!-- 引入车牌键盘 -->
   <view>
        <view class='fnt-30 fwb p-b'>输入车牌号码</view>
        <view class="fx b-b p-b fnt fwn car-plt" bindtap="showKbFn">
          <view class="p-r tri">{{filter.subString(form.carNo, 0, 1)}}</view>
          <view wx:if="{{form.carNo.length > 1}}">{{filter.subString(form.carNo, 1)}}</view>
          <text class="clr-bf" wx:else>请输入车牌号码</text>
        </view>
      </view>
<keyboard id="kb" param="{{kb}}" bind:keyEvt="onKey"></keyboard>

2. 在js中使用

data:{
   kb: {
      kbType: "plate",  //传入车牌键盘 类型 plate
      str: ''
    },
}
//点击输入框弹起键盘
showKbFn() {
    this.setData({
      ['kb.str']: this.data.form.carNo
    })
    this.kb.show()
  },
  //获取键盘输入的值 并进入赋值给form.carNo
 onKey(e) {
    this.setData({
      ['form.carNo']: e.detail
    })
  },

// 提取字段
var subString = function (str, start, len) {
  var s = str || ''
  return s.substring(start, len)
}