更新记录

1.0.0（2025-05-14） 下载此版本

• 支持uni_modules目录规范
• 支持普通车牌和特殊车牌
• 支持新能源汽车车牌
• 全新自定义车牌键盘组件

平台兼容性

uni-app

其他

king-licence-plate 普通车牌和特殊车牌组件，全新自定义车牌键盘组件

全平台兼容

代码演示

插件demo

• king-licence-plate-demo 为 demo
• 位于 uni_modules/king-licence-plate/components/king-licence-plate-demo
• 导入插件后直接使用可查看demo

一、选择车牌组件使用方法

API

Props

<template>
    <!-- 选择车牌组件，uni_modules规范，不需额外引入注册 -->
    <king-licence-plate></king-licence-plate>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>

</style>

二、选择车牌键盘弹窗组件使用方法

API

Props

<template>
    <view>
        <view @click="show = true">点击我显示车牌号码选择弹窗</view>
        <!-- 车牌键盘弹窗 -->
        <CarNoPop :popShow.sync="show" :plateIndex="curIndex" @click="keyboardClk" @delete="keyboardDel" />
    </view>
</template>
<script>
    // 引入车牌键盘弹窗组件，这个路径以实际路径为准
    import CarNoPop from './CarNoPop/index.vue'
    export default {
        components: {
            CarNoPop,
        },
        data() {
            return {
                show: false,
            }
        },
        destroyed() {
            this.show = false
        },
        methods: {
            // 键盘点击
            keyboardClk(key) {
                this.$set(this.plateList, this.curIndex, key)
                if (this.curIndex < this.maxNum - 1) {
                    this.curIndex++
                }
            },
            // 键盘删除
            keyboardDel() {
                const curValue = this.plateList[this.curIndex]
                if (curValue) {
                    this.$set(this.plateList, this.curIndex, '')
                } else if (this.curIndex > 0) {
                    this.curIndex--
                }
            },
        },
    }
</script>