这个是基于其他人的代码根据自己的业务需求改的。

结构

需要这两块

代码

index.wxml

<view class="bind-car">
  <view style="width: 100vw;height: 20vh;border: 1px solid red;" bindtap="chooseProvinceCn">
    <view>{{inputValue}}</view>
  </view>
</view>
<keyboard bindinputword="inputWord" keyType="{{setKeyType}}" isShow="{{showKeyBoard}}"></keyboard>

app.json

 "usingComponents": {
    "keyboard": "/component/keyboard/keyboard"
  }

index.js

Page({
  data: {
    setKeyType: 'province',
    showKeyBoard: false,
    keyIndex: 0,
    provinceCn: '',
    provinceCode: '',
    carCode: '',
    inputValue: ''
  },
  inputWord(e) {
    let that = this;
    if (e.detail.type == 'input') {
      if (this.data.keyIndex == 0) {
        this.setData({
          provinceCn: e.detail.value
        })
      } else if (this.data.keyIndex == 1) {
        this.setData({
          provinceCode: e.detail.value
        })
      } else if (this.data.keyIndex == 2) {
        if (this.data.carCode.length < 6) {
          this.setData({
            carCode: this.data.carCode + e.detail.value
          })
        }
      }
      let inValue = this.data.inputValue;
      let eValue = String(e.detail.value);
      let cumValue = inValue + eValue
      if (cumValue.length == 9) {
        return
      }
      if (cumValue.length == 1) {
        that.setData({
          setKeyType: 'letter',
          showKeyBoard: true,
          keyIndex: 1,
          focusProvince: true,
          focusCode: false,
          inputValue: cumValue
        })
      } else {
        that.setData({
          setKeyType: 'carlicense',
          showKeyBoard: true,
          keyIndex: 2,
          inputValue: cumValue
        })
      }

    } else if (['del', 'delProvince', 'delLetter'].includes(e.detail.type)) {
      let type = e.detail.type;
      let cumValueLength = this.data.inputValue.length;
      if (cumValueLength == 2) {
        this.setData({
          setKeyType: 'letter',
        })
      } else if (cumValueLength == 1) {
        this.setData({
          provinceCn: '',
          setKeyType: 'province',
          showKeyBoard: true,
          keyIndex: 0,
          inputValue: ''
        })
      }
      if (type == 'del' && this.data.carCode) {
        this.setData({
          inputValue: this.data.inputValue.substr(0, this.data.inputValue.length - 1)
        })
      }
    } else if (e.detail.type == 'blur') {
      this.setData({
        focusCode: false,
        focusProvince: false
      })
    }
  },
  chooseProvinceCn() {
    let cumValue = this.data.inputValue;
    let that = this;
    if (cumValue.length == 0) {
      that.setData({
        setKeyType: 'province',
        showKeyBoard: true,
        keyIndex: 0,
        focusProvince: true,
        focusCode: false,
        inputValue: ''
      })
    } else if (cumValue.length == 1) {
      that.setData({
        setKeyType: 'letter',
        showKeyBoard: true,
        keyIndex: 1,
        focusProvince: true,
        focusCode: false,
      })
    } else {
      that.setData({
        setKeyType: 'carlicense',
        showKeyBoard: true,
        keyIndex: 2,
        focusCode: true,
        focusProvince: false,
      })
    }
  },
})

index.wxss

.bind-car {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  width: 50%;
  padding: 25rpx 30rpx;
}

.bind-car .car-province {
  margin-right: 30rpx;
  width: 170rpx;
  height: 88rpx;
  border: 1rpx solid #999999;
  border-radius: 4rpx;
  display: flex;
}

.bind-car .car-province view {
  width: 86rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 34rpx;
  font-weight: 500;
  color: #333333;
}

.bind-car .car-province view:first-child {
  position: relative;
}

.bind-car .car-province view:first-child::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 1rpx;
  height: 40rpx;
  background: #999999;
  margin-top: -20rpx;
}

.bind-car .car-province.active {
  border-color: #FF5152;
}

.bind-car .car-province.active view:first-child::after {
  background: #E83333;
}

.car-number {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  border: 1rpx solid #999999;
  border-radius: 4rpx;
  font-size: 34rpx;
  font-weight: 500;
  color: #333333;
  text-align: center;
}

.car-number.active {
  border-color: #E83333;
}

keyboard.js

Component({
  properties: {
    keyType: {
      type: String,
      value: 'letter',
      observer: function (newVal, oldVal) {
        this.changeType()
      }
    },
    isShow: {
      type: Boolean,
      value: false
    }
  },
  data: {
    dataArr1: [],
    dataArr2: [],
    dataArr3: [],
    dataArr4: [],
    type: ''
  },
  attached() {
    this.changeType()
  },
  methods: {
    changeType() {
      if (this.data.keyType == 'letter') {
        this.setData({
          dataArr1: ["Q", "W", "E", "R", "T", "Y", "U", "P", "N", "M"],
          dataArr2: ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
          dataArr3: ["Z", "X", "C", "V", "B"],
          dataArr4: [],
        })
      } else if (this.data.keyType == 'province') {
        console.log(2)
        this.setData({
          dataArr1: ["京", "沪", "粤", "津", "冀", "晋", "辽", "蒙", "黑", "吉"],
          dataArr2: ["苏", "浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘"],
          dataArr3: ["川", "贵", "云", "渝", "桂", "琼", "藏", "陕"],
          dataArr4: ["甘", "青", "宁", "新", "台"],
        })
      } else if (this.data.keyType == 'carlicense') {
        // console.log(3)
        this.setData({
          dataArr1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
          dataArr2: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"],
          dataArr3: ["L", "M", "N", "P", "Q", "R", "S", "T", "U", "V"],
          dataArr4: ["W", "X", "Y", "Z", "港", "澳", "学", "领"],
          // type: 'delPro'
          type: 'del'
        })
      }
    },
    inputKey(e) {
      // console.log(e)
      this.triggerEvent('inputword', { type: 'input', value: e.currentTarget.dataset.value })
    },
    delKey(e) {
      // console.log(e)
      let typeValue = this.data.type;
      // console.log(type)
      if (typeValue) {
        console.log(typeValue)
        this.triggerEvent('inputword', { type: typeValue })
      }


    },
    complete() {
      this.hideKeyBoard()
    },
    hideKeyBoard() {
      // console.log(11)
      this.setData({
        isShow: false
      })
      // this.triggerEvent('inputword', { type: 'blur' })
    }
  }
})

keyboard.wxml

<view class="keyboard" wx:if="{{isShow}}">
  <view class="complete" bindtap='complete'>完成</view>
  <view class="item" style="margin-top: 2vh;">
    <view wx:for="{{dataArr1}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
  </view>
  <view class="item">
    <view wx:for="{{dataArr2}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
  </view>
  <view class="item">
    <view wx:for="{{dataArr3}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
  </view>

  <view class="item" wx:if="{{dataArr4.length}}">
    <view wx:for="{{dataArr4}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
  </view>
  <!-- <view class="delbtn" bindtap="delKey" wx:if="{{keyType == 'carlicense'}}"><image src="./icon_del.png"></image></view> -->
  <view class="delbtn" bindtap="delKey">
    <image src="./icon_del.png"></image>
  </view>

</view>
<view class="mask" bindtap="hideKeyBoard" wx:if="{{isShow}}"></view>

keyboard.wxss

.keyboard {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99999;
  width: 100%;
  background: #d1d6d9;
  padding: 20rpx 10rpx 0;
  padding-bottom: calc(30px + env(safe-area-inset-bottom)/2);
  box-sizing: border-box;
}

.keyboard .item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.keyboard .item view {
  width: 9%;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  margin-right: 10rpx;
  background: #ffffff;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.keyboard .item view:last-child {
  margin-right: 0;
}

.keyboard .delbtn {
  position: fixed;
  right: 10rpx;
  bottom: calc(40px + env(safe-area-inset-bottom)/2);
  height: 70rpx;
  width: 18%;
  z-index: 999999;
  background: #adb3bd;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.keyboard .delbtn image {
  width: 60rpx;
  height: 60rpx;
}

.mask {
  position: fixed;
  left: 0;
  top: 113rpx;
  bottom: 0;
  right: 0;
  z-index: 99998;
}

.complete {
  text-align: right;
  margin-right: 3vw;
  box-sizing: border-box;
  font-size: 36rpx;
  /* background-color: #ffffff; */
  color: black;
}