效果图：如下

子组件

组件：wxml

<view wx:if="{{isShow}}" class="vehicle-panel" style="background-color:#DCE2E6">
    <!--省份简写键盘-->
    <block wx:if="{{keyBoardType === 1}}">
        <view class="vehicle-panel-row">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100"
                class='vehicle-panel-row-button' wx:for="{{keyVehicle1}}" bindtap='vehicleTap' data-type="1"
                data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
        </view>
        <view class="vehicle-panel-row">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100"
                class='vehicle-panel-row-button' wx:for="{{keyVehicle2}}" bindtap='vehicleTap' data-type="1"
                data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
        </view>
        <view class="vehicle-panel-row">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100"
                class='vehicle-panel-row-button' wx:for="{{keyVehicle3}}" bindtap='vehicleTap' data-type="1"
                data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
        </view>
        <view class="vehicle-panel-row-last">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100"
                class='vehicle-panel-row-button vehicle-panel-row-button-last' bindtap='vehicleTap' data-type="1"
                data-value="{{item}}" wx:for="{{keyVehicle4}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
        </view>
    </block>
    <!--英文键盘  -->
    <block wx:else>
        <view class="vehicle-panel-row">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100"
                class='vehicle-panel-row-button vehicle-panel-row-button-number ' bindtap='vehicleTap' data-type="2"
                data-value="{{item}}" wx:for="{{keyNumber}}" wx:for-index="idx" wx:key="item">{{item}}</view>
        </view>
        <view class="vehicle-panel-row">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" data-type="2"
                class='vehicle-panel-row-button small' wx:for="{{keyEnInput1}}" bindtap='vehicleTap'
                data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
        </view>
        <view class="vehicle-panel-row">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" data-type="2"
                class='vehicle-panel-row-button small' wx:for="{{keyEnInput2}}" bindtap='vehicleTap'
                data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
            <view hover-class="vehicle-hover" hover-start-time="10" bindtap='vehicleTap' data-value="delete"
                hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-img smalls'>
                <image src='{{OSS}}20210929/4ae39cf45fb6f551.png' class='vehicle-en-button-delete' mode='aspectFit' />
            </view>
        </view>
        <view class="vehicle-panel-row-last">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" data-type="2"
                class='vehicle-panel-row-button vehicle-panel-row-button-last small' bindtap='vehicleTap'
                data-value="{{item}}" wx:for="{{keyEnInput3}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100"
                class='vehicle-panel-row-button vehicle-panel-ok' bindtap='vehicleTap' data-value="ok">确定</view>
        </view>
    </block>
</view>

组件：wxss

:host {
  width: 100%;
}

.vehicle-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1000;
  padding: 4rpx 14rpx 62rpx 13rpx;
}

.vehicle-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vehicle-panel-row-last {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vehicle-panel-row-button {
  background: #FFFFFF;
  box-shadow: 0 2rpx 0 0 rgba(0, 0, 0, 0.15);
  border-radius: 9rpx;
  margin: 14rpx 0 0 0;
  width: 78rpx;
  height: 91rpx;
  text-align: center;
  line-height: 91rpx;
  color: #2F3336;
  font-size: 31rpx;
  font-family: PingFangSC-, PingFang SC;
  font-weight: 400;
}

.vehicle-panel-row-button-number,
.small {
  width: 67rpx !important;
  font-weight: normal;
}
.smalls{
  width: 67rpx !important;
  background: #C2C8CC;
}
.vehicle-panel-row-button-last {
  width: 78rpx;
  height: 91rpx;
  line-height: 91rpx;
}

.vehicle-hover {
  background-color: #ccc;
}

.vehicle-panel-row-button-img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vehicle-en-button-delete {
  width: 40rpx;
  height: 29rpx;
}

.vehicle-panel-ok {
  background: #C2C8CC;
  box-shadow: 0 2rpx 0 0 rgba(0, 0, 0, 0.15);
  border-radius: 9rpx;
  color: #2F3336;
  width: 212rpx;
  height: 91rpx;
  line-height: 91rpx;
  font-size: 27rpx;
  font-family: PingFangSC-, PingFang SC;
  font-weight: normal;

}

组件：json

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

组件：js

Component({

    externalClasses: ['v-panel'],

    properties: {
        isShow: {
            type: Boolean,
            value: false,
        },
        //1为省份键盘，其它为英文键盘
        keyBoardType: {
            type: Number,
            value: 1,
        }
    },
    data: {
        OSS: `${wx.$PUBLIC.statics}`,
        keyVehicle1: '京津沪冀豫云辽黑',
        keyVehicle2: '湘皖鲁新苏浙赣鄂',
        keyVehicle3: '桂甘晋新陕吉闽贵',
        keyVehicle4: '粤川青藏琼宁渝临',
        keyNumber: '1234567890',
        keyEnInput1: 'QWERTYUIOP',
        keyEnInput2: 'ASDFGHJKL',
        keyEnInput3: 'ZXCVBNM',
    },
    methods: {
        vehicleTap: function (event) {
            let val = event.currentTarget.dataset.value;
            let type = event.currentTarget.dataset.type;
            switch (val) {
                case 'delete':
                    this.triggerEvent('delete');
                    break;
                case 'ok':
                    this.triggerEvent('ok');
                    break;
                default:
                    this.triggerEvent('inputchange', {val,type});
            }
        },`在这里插入代码片`
    }
});

父组件

wxml

 <view class="box" bindtap="onClick">
	<view>{{carNo[0]}}</view>
 	<view>{{carNo[1]}}</view>
	<view>{{carNo[2]}}</view>
	<view>{{carNo[3]}}</view>
	<view>{{carNo[4]}}</view>
	<view>{{carNo[5]}}</view>
	<view>{{carNo[6]}}</view>
	<block wx:if="{{carNo.length > 7}}">
		<view>{{carNo[7]}}</view>
	</block>
</view>
<view class="new" wx:if="{{carNo.length <= 7}}">
	<image src="{{OSS}}20210929/ccd9007e50408184.png" />
</view>

<!-- 键盘 -->
<v-panel is-show="{{isShow}}" bindok="inputOk" binddelete="inputdelete" bindinputchange="inputChange" keyBoardType="{{keyBoardType}}" />

js

data: {
        isShow: false,
        keyBoardType: 1,
        carNo: ''
    },
// 弹出键盘事件
    onClick: function () {
        this.setData({
            isShow: !this.data.isShow
        })
    },
    // 键盘change
    inputChange: function (e) {
        let value = e.detail.val;
        let type = e.detail.type;
        let carNo = this.data.carNo;
        carNo += value;
        if (type == 1) {
            this.setData({
                keyBoardType: 2
            })
        }
        this.setData({
            carNo: carNo
        })
    },
    // 键盘确定
    inputOk: function (e) {
        /* isCarPlate用于判断输入的车牌号是否符合规范 */
        if (!this.isCarPlate(this.data.carNo)) {
            wx.showToast({
                title: '请输入正确的车牌号',
                icon: 'none',
            })
            return false;
        }
        this.setData({
            isShow: false,
            // keyBoardType: 1
        })
    },
    // 键盘删除
    inputdelete: function (e) {
        console.log(e);
        let carNo = this.data.carNo;
        carNo = carNo.substring(0, carNo.length - 1);
        if (carNo.length == 0) {
            this.setData({
                keyBoardType: 1
            })
        }
        this.setData({
            carNo,
        })
    },
    /* 判断车牌号 */
    isCarPlate(vehicleNumber) {
        let xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
        let creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
        if (vehicleNumber.length == 7) {
            return creg.test(vehicleNumber);
        } else if (vehicleNumber.length == 8) {
            return xreg.test(vehicleNumber);
        } else {
            return false;
        }
    },