u-keyboard加自定义输入框，uniapp车牌号键盘

<template>
    <view class="carPage">
        <view class="card">
            <view class="car-box">
                <span class="car-input" :class="isClick == index ? 'choose-class' :''" @click="handleCar(index)"
                    v-for="(item, index) in value" :key="index">{{item}}</span>
            </view>
        </view>
        <u-keyboard ref="uKeyboard" mode="car" @change="valChange" :showCancel="false" :showConfirm="false"
            @backspace="backspace" @close="closeKey" :show="carKeyboard" :autoChange="isChange"></u-keyboard>
    </view>
</template>

<script>
    export default {
        components: {
            top
        },
        data() {
            return {
                isChange: false, //是否改变为英文
                isClick: 0, //点击的索引
                value: ['', '', '', '', '', '', '', ''], // 车牌值
                carKeyboard: false, //是否显示车牌号键盘
            };
        },
        onLoad(e) {
            console.log("获取到的", e);
        },
        mounted() {},
        methods: {
            //选择输入第几位
            handleCar(e) {
                console.log("这是输入00000", e);
                this.isClick = e
                if (this.isClick == 0) {
                    //如果是第0位的则输入完后自动切换为英文
                    this.isChange = true;
                } else {
                    this.isChange = false;
                }
                //显示键盘
                this.carKeyboard = true
                console.log("这是输入00000", this.isClick);
            },
            //关闭键盘
            closeKey() {
                this.carKeyboard = false;
            },
            // 按键被点击(点击退格键不会触发此事件)
            valChange(val) {
                // this.value[this.isClick] = val;==this.$set(this.value, this.isClick, val);
                //将键盘选择的输入到车牌号内，因为this.value[this.isClick] = val无法同步更新所以用this.$set(this.value, this.isClick, val)
                this.$set(this.value, this.isClick, val)
                //如果未输入完车牌号
                if (this.isClick < 7) {
                    //输入完跳转到下一位
                    this.isClick = this.isClick + 1
                } else {
                    //输入完了关闭键盘
                    this.carKeyboard = false;
                }
            },
            // 退格键被点击
            backspace() {
                // 清空选择的号码
                this.value[this.isClick] = ''
                //如果大于0位的删除会跳到上一个位数
                if (this.isClick > 0) {
                    this.isClick = this.isClick - 1
                } else {
                    //第0位的时候直接清空,并关闭键盘
                    this.$set(this.value, 0, '')
                    this.carKeyboard = false;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .carPage {
        background-color: #f5f5f5;
        height: 100vh;
        width: 100vw;
        position: relative;

        .card {
            background-color: #fff;
            margin: 16rpx;
            padding: 16rpx;
            border-radius: 16rpx;

            .car-box {
                display: flex;
                margin: 16rpx;
                justify-content: space-evenly;

                .car-input {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    border: 2rpx solid #CCC;
                    width: 68rpx;
                    margin-right: 10rpx;
                    height: 92rpx;
                    border-radius: 8rpx;
                    background-color: #f5f5f5;
                    border: 4rpx solid #f5f5f5 !important;
                }

                .car-input:nth-child(2):after {
                    display: inline-block;
                    position: absolute;
                    top: 50%;
                    left: 120%;
                    transform: translateY(-50%);
                    height: 10rpx;
                    width: 10rpx;
                    border-radius: 50%;
                    background-color: #000;
                    z-index: 999;
                    content: '';
                }

                .car-input:nth-child(2) {
                    margin-right: 32rpx;
                }

                .choose-class {
                    border: 4rpx solid #52cb9a !important;
                }
            }

            .inputBox {
                margin: 16rpx;
                position: relative;
                display: flex;
                justify-content: space-evenly;
                align-items: center;

                .input {
                    width: 68rpx;
                    height: 92rpx;
                    border: 2rpx solid #000;
                    text-align: center;
                }

                .dot {
                    font-size: 70rpx;
                    color: #000;
                }
            }
        }
    }
</style>