更新记录

1.0.0（2022-12-30） 下载此版本

基于uni-app框架开发的车牌选择键盘，特色功能：1.app端支持按键语音播报，按键振动 2.输入省份自动匹配对应的字母简称 3.可筛选省简称,减少查找麻烦

平台兼容性

插件说明

基于uni-app框架开发的车牌选择键盘

特色功能：1.app端支持按键语音播报，按键振动 2.输入省份自动匹配对应的字母简称 3.可筛选省简称,减少查找麻烦

平台兼容性

兼容微信小程序，app移动端

使用方式

<template>
    <view >
        <!-- 引用车牌组件 -->
        <car-keyboard ref="carkeyboard" :defaultValue="carValue" @change="carValueChange"
            @backspace="backspaceClick" @clearAllValue="backspaceClick"></car-keyboard>
    </view>
</template>

import carKeyBoard from '@/components/carkeyboard/carkeyboard.vue'
    export default {
        components: {
            'car-keyboard': carKeyBoard
        },

API文档

Event

使用示例

<template>
    <view class="car_content">

        <view style="display: flex;">
            <view>车牌号：</view> 
            <view style="flex:1">
                <input class="l_input"
                    placeholder="请添加车牌号" v-model="carValue" disabled="true" @click="carOpen" />
            </view>
        </view>

        <car-keyboard ref="carkeyboard" :defaultValue="carValue" @change="carValueChange"
            @backspace="backspaceClick" @clearAllValue="backspaceClick"></car-keyboard>
    </view>
</template>

<script>
    import carKeyBoard from '@/components/carkeyboard/carkeyboard.vue'
    export default {
        components: {
            'car-keyboard': carKeyBoard
        },
        data() {
            return {
                title: '车牌键盘',
                carValue: '',
                showProvince: true, //-添加车牌 false
            }
        },
        methods: {
            /**
             * @desc 车牌键盘显示
             */
            carOpen() {
                this.$refs.carkeyboard.show()
            },
            /**
             * @desc 键盘按键点击回调监听
             */
            carValueChange(e) {
                // console.log(e);
                this.carValue += e.value
            },
            /**
             * @desc 删除、清空回调
             */
            backspaceClick(e) {
                console.log(e);
                this.carValue = e.value
            },
        }
    }
</script>

<style lang="scss" scoped>
    .car_content {
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        padding-left: 40rpx;
        height: calc(100vh);
    }
    .l_input{
        border: 5rpx solid;
        border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
        width: 500rpx;
        margin-left: 10rpx;
        margin-bottom: 20rpx;
        padding: 5rpx 10rpx;
    }
</style>