Applet - Custom keyboard component

Look at FIG Effect:



Use as follows:
wxml in

<keyboard isKeyboard="{{isKeyboard}}" keyboardType="{{keyboardType}}" maxLength="{{maxLength}}" minLength="{{minLength}}" test="{{test}}" 
placeholder="{{placeholder}}" isKeyboardContent="{{isKeyboardContent}}" bind:fwhfContent="{{whichInput}}" inputContent="{{inputContent}}"/>
<input type="text" placeholder="请输入车牌号" value='{{carCodeNumber}}' bindtap='getCodeNumber' disabled/>

js in

data:{
	carCodeNumber:'',//车牌号
	isKeyboard: false, //是否显示键盘
	keyboardType:'keyboardOne',//键盘类型
 	isKeyboardContent:true,//控制首先展示省称还是英文
	maxLength:'',//最大长度
	minLength:'',//最小程度
	test:'',//正则
	placeholder:'',//提示信息
	whichInput:'',//方法名
	inputContent:'',//input内容
}
getCarCode() {
	this.setData({
	  isKeyboard:true,
	  maxLength:17,
	  minLength:17,
  	  isKeyboardContent:false,
	  test:'[A-Z0-9]{3}',
	  placeholder:'请输入17位车辆识别代号',
	  whichInput:'changeCarCode',
	  inputContent: this.data.carCode
	})
}
changeCarCode(e){
	this.setData({
	  isKeyboard: false,
	  carCode: e.detail.inputContent
	})
}

Customize Keyboard source code as follows:
wxml Source

<cover-view class="keyboard {{isKeyboard ? 'show' : 'hide'}}">
  <cover-view class="{{keyboardType == 'keyboardOne' ? 'show' : 'hide'}}">
    <cover-view class="inputBox"><cover-view class="inputBoxContent {{inputContent ? 'lightContent' : 'darkContent'}}">{{inputContent || placeholder}}</cover-view></cover-view>
    <cover-view class="keyboardTitle">
      <cover-view class="keyboardTitleLogo">love.fwhf.xyz</cover-view>
      <cover-view class="keyboardTitleContent {{isKeyboardContent ? 'keyboardTitleContentColorDark' : 'keyboardTitleContentColorWhite'}}" data-value="省称" bindtap="changeKeyboardContent">省称</cover-view>
      <cover-view class="keyboardTitleContent {{isKeyboardContent ? 'keyboardTitleContentColorWhite' : 'keyboardTitleContentColorDark'}}" data-value="英\数" bindtap="changeKeyboardContent">英\数</cover-view>
      <cover-view class="keyboardFinish" data-value="✔" bindtap="keyboard">✔</cover-view>
    </cover-view>
    <cover-view class="keyboardContentOne {{isKeyboardContent ? 'keyboardContentOneShow' : 'keyboardContentOneHide'}}" bindtap="keyboard">
      <cover-view class="keyboardContentOneContent" hover-class="keyboardContentDark" hover-start-time="0" hover-stay-time="100" wx:for="{{categoryOne}}" wx:key="index" data-value="{{item}}">
        {{item}}
      </cover-view>
    </cover-view>
    <cover-view class="keyboardContentTwo {{isKeyboardContent ? 'keyboardContentTwoHide' : 'keyboardContentTwoShow'}}">
      <cover-view class="keyboardContentTwoLineOne" bindtap="keyboard">
        <cover-view class="keyboardContentTwoLineOneContent" hover-class="keyboardContentDark" hover-start-time="0" hover-stay-time="100" wx:for="{{categoryTwo}}" wx:key="index" data-value="{{item}}">
          {{item}}
        </cover-view>
      </cover-view>
      <cover-view class="keyboardContentTwoLineTwo" bindtap="keyboard">
        <cover-view class="keyboardContentTwoLineTwoContent" hover-class="keyboardContentDark" hover-start-time="0" hover-stay-time="100" wx:for="{{categoryThree}}" wx:key="index" data-value="{{item}}">
          {{item}}
        </cover-view>
      </cover-view>
      <cover-view class="keyboardContentTwoLineThree"  bindtap="keyboard">
        <cover-view class="keyboardContentTwoLineThreeContent" hover-class="keyboardContentDark" hover-start-time="0" hover-stay-time="100" wx:for="{{categoryFour}}" wx:key="index" data-value="{{item}}">
          {{item}}
        </cover-view>
      </cover-view>
      <cover-view class="keyboardContentTwoLineFour" bindtap="keyboard">
        <cover-view class="keyboardContentTwoLineFourContent" hover-class="keyboardContentDark" hover-start-time="0" hover-stay-time="100" wx:for="{{categoryFive}}" wx:key="index" data-value="{{item}}">
          {{item}}
        </cover-view>
      </cover-view>
    </cover-view>
  </cover-view>
 
  <cover-view class="{{keyboardType == 'keyboardTwo' ? 'show' : 'hide'}}">
    <cover-view class="inputBox"><cover-view class="inputBoxContent {{inputContent ? 'lightContent' : 'darkContent'}}">{{inputContent || placeholder}}</cover-view></cover-view>
    <cover-view class="keyboardTwo" bindtap="keyboard">
      <cover-view class="keyboardTwoContent" hover-class="keyboardContentDark" hover-start-time="0" hover-stay-time="100" wx:for="{{categorySix}}" wx:key="index" data-value="{{item}}">
        {{item}}
      </cover-view>
    </cover-view>
  </cover-view>
</cover-view>

wxss source

.keyboard{
  position:fixed;
  bottom:0;
  background:rgb(244,244,244);
  padding-bottom:20rpx;
  z-index:999;
}
.show{
  display: block;
}
.hide{
  display: none;
}
.inputBox{
  height:80rpx;
}
.inputBoxContent{
  margin:10rpx auto 0;
  height:70rpx;
  line-height:70rpx;
  width:690rpx;
  border-radius: 20rpx;
  background:rgb(255,255,255);
  padding-left:20rpx;
  overflow: hidden;
  font-size:36rpx;
}
.lightContent{
  color:#333;
}
.darkContent{
  color:rgb(166,166,166);
}
.keyboardTitle{
  width:750rpx;
  height:80rpx;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.keyboardTitle .keyboardTitleLogo{
  width:290rpx;
  text-align:center;
  color:rgb(166,166,166);
  margin:0 0 0 10rpx;
  height:70rpx;
  border-radius:20rpx;
  line-height:70rpx;
  background:white;
}
.keyboardTitle .keyboardTitleContent{
  width:140rpx;
  text-align:center;
  margin:0 0 0 10rpx;
  height:70rpx;
  border-radius:20rpx;
  line-height:70rpx;
}
.keyboardTitle .keyboardFinish{
  width:130rpx;
  margin:0 10rpx;
  height:70rpx;
  border-radius:20rpx;
  line-height:70rpx;
  text-align:center;
  background:white;
}
.keyboardContentOne{
  /* display:flex; */
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
  /* background:white; */
}
.keyboardContentOneShow{
  display:flex;
}
.keyboardContentOneHide{
  display: none;
}
.keyboardContentTwo{
  /* display:flex; */
  /* background:white; */
}
.keyboardContentTwoHide{
  display: none;
}
.keyboardContentTwoShow{
  display: block;
}
.keyboardContentOneContent{
  background:white;
  width:88rpx;
  line-height:91rpx;
  text-align:center;
  margin:2rpx;
  border-radius: 6rpx;
}
.keyboardContentTwoLineOne , .keyboardContentTwoLineTwo , .keyboardContentTwoLineThree , .keyboardContentTwoLineFour{
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.keyboardContentTwoLineOneContent,.keyboardContentTwoLineTwoContent,
.keyboardContentTwoLineThreeContent,
.keyboardContentTwoLineFourContent{
  background:white;
  width:71rpx;
  line-height:91rpx;
  text-align:center;
  margin:2rpx;
  border-radius: 6rpx;
}
.keyboardTwo{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.keyboardTwoContent{
  background:white;
  width:230rpx;
  margin:12rpx 6rpx 0;
  text-align: center;
  line-height: 100rpx;
  font-size:36rpx;
  border-radius: 10rpx;
}
.keyboardTitleContentColorWhite{
  background:white;
}
.keyboardTitleContentColorDark{
  background:rgb(222,222,222);
}
.keyboardContentDark{
  background:rgb(222,222,222);
}

js source

Component({
  properties: {
    'isKeyboard':{
      type: Boolean,
      value: false
    },
    'keyboardType': {
      type: String,
      value: "keyboardOne"
    },
    'maxLength': {
      type: Number,
      value: ""
    },
    'minLength': {
      type: Number,
      value: ""
    },
    'test': {
      type: String,
      value: ""
    },
    'placeholder':{
      type: String,
      value: ""
    },
    'inputContent':{
      type: String,
      value: ""
    },
    'isKeyboardContent':{
      type: Boolean,
      value: true
    }
  },
  data: {
    categoryOne: '粤京津沪冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵川青藏琼宁渝✘'.split(''),
    categoryTwo: '1234567890'.split(''),
    categoryThree: 'QWERTYUIOP'.split(''),
    categoryFour: 'ASDFGHJKL'.split(''),
    categoryFive: 'ZXCVBNM✘'.split(''),
    categorySix: '123456789✘0✔'.split(''),
  },
  methods: {
    changeKeyboardContent(e){
      if (e.currentTarget.dataset.value == '省称'){
        this.setData({
          isKeyboardContent: true
        })
      }
      if (e.currentTarget.dataset.value == '英\数'){
        this.setData({
          isKeyboardContent: false
        })
      }
    },
    keyboard(e) {
      // console.log(e)
      if (e.target.dataset.value == undefined){
        return;
      }
      if (e.target.dataset.value == '✘') {
        if (this.data.inputContent.length > 0) {
          this.setData({
            inputContent: this.data.inputContent.substring(0, this.data.inputContent.length - 1)
          })
        }
        return
      }
      if (e.target.dataset.value == '✔'){
        if (this.data.minLength != '' && this.data.inputContent.length < this.data.minLength) {
          wx.showToast({
            title: '输入位数不得小于' + this.data.minLength + '位',
            icon: 'none'
          })
          return
        }
        let reg = new RegExp(this.data.test)
        if (this.data.test != '' && !reg.test(this.data.inputContent)) {
          wx.showToast({
            title: '不符合规则',
            icon: 'none'
          })
          return
        }
        this.triggerEvent('fwhfContent', {
          inputContent: this.data.inputContent
        })
        return
      }
      if (this.data.maxLength != '' && this.data.inputContent.length >= this.data.maxLength) {
        wx.showToast({
          title: '输入位数不得超过' + this.data.maxLength + '位',
          icon: 'none'
        })
        return
      }
      this.setData({
        inputContent: this.data.inputContent + e.target.dataset.value
      })
    }
  }
})