更新记录

v0.0.2（2025-09-30） 下载此版本

车牌号输入组件 (PlateInput)

一个功能完整的车牌号输入组件，支持普通车牌和新能源车牌，提供QWERTY键盘布局和智能输入体验。

功能特性

  • ✅ 支持普通车牌（7位）和新能源车牌（8位）
  • ✅ 标准QWERTY键盘布局
  • ✅ 智能输入验证和自动跳转
  • ✅ 支持省份选择、字母数字混合输入
  • ✅ 删除逻辑优化，避免重复删除
  • ✅ 响应式设计，适配不同屏幕尺寸
  • ✅ 支持v-model双向绑定

安装使用

1. 引入组件

<template>
  <view>
    <plate-input 
      v-model="plateNumber" 
      placeholder="请输入车牌号"
      @change="onPlateChange"
      @focus="onFocus"
      @blur="onBlur"
    />
  </view>
</template>

<script>
import PlateInput from '@/components/plate-input/plate-input.vue'

export default {
  components: {
    PlateInput
  },
  data() {
    return {
      plateNumber: ''
    }
  },
  methods: {
    onPlateChange(value) {
      console.log('车牌号变化:', value)
    },
    onFocus() {
      console.log('输入框获得焦点')
    },
    onBlur() {
      console.log('输入框失去焦点')
    }
  }
}
</script>

API 文档

Props

参数 类型 默认值 说明
value String '' 车牌号值，支持v-model
placeholder String '请输入车牌号' 占位符文本

Events

事件名 说明 回调参数
input 车牌号输入时触发 (value: string)
change 车牌号变化时触发 (value: string)
focus 输入框获得焦点时触发 -
blur 输入框失去焦点时触发 -

车牌号规则

普通车牌（7位）

  • 第1位：省份简称（京、津、沪、渝等）
  • 第2位：字母（A-Z）
  • 第3-6位：字母或数字（A-Z, 0-9）
  • 第7位：字母（A-Z）

新能源车牌（8位）

  • 第1位：省份简称（京、津、沪、渝等）
  • 第2位：字母（A-Z）
  • 第3-6位：字母或数字（A-Z, 0-9）
  • 第7位：字母（A-Z）
  • 第8位：字母（A-Z）

键盘布局

省份选择

30个省份简称，采用6列网格布局：

京 津 沪 渝 冀 豫
云 辽 黑 湘 皖 鲁
新 苏 浙 赣 鄂 桂
甘 晋 蒙 陕 吉 闽
贵 粤 青 藏 川 宁

QWERTY键盘

标准QWERTY布局，数字独占一行：

数字行：

1 2 3 4 5 6 7 8 9 0

字母行：

Q W E R T Y U I O P
  A S D F G H J K L
    Z X C V B N M ←

使用示例

基础用法

<template>
  <view class="demo">
    <text class="title">车牌号输入</text>
    <plate-input v-model="plateNumber" />
    <text class="result">当前车牌号：{{ plateNumber }}</text>
  </view>
</template>

<script>
import PlateInput from '@/components/plate-input/plate-input.vue'

export default {
  components: { PlateInput },
  data() {
    return {
      plateNumber: ''
    }
  }
}
</script>

<style>
.demo {
  padding: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.result {
  font-size: 28rpx;
  color: #666;
  margin-top: 20rpx;
}
</style>

表单验证

<template>
  <view class="form">
    <plate-input 
      v-model="formData.plateNumber"
      @change="validatePlate"
    />
    <text v-if="plateError" class="error">{{ plateError }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        plateNumber: ''
      },
      plateError: ''
    }
  },
  methods: {
    validatePlate(value) {
      if (!value) {
        this.plateError = '请输入车牌号'
        return
      }

      if (value.length < 7) {
        this.plateError = '车牌号不完整'
        return
      }

      if (value.length > 8) {
        this.plateError = '车牌号格式错误'
        return
      }

      // 验证通过
      this.plateError = ''
      console.log('车牌号验证通过:', value)
    }
  }
}
</script>

自定义样式

<template>
  <view class="custom-plate">
    <plate-input v-model="plateNumber" />
  </view>
</template>

<style>
.custom-plate {
  /* 自定义容器样式 */
  background: #f5f5f5;
  border-radius: 12rpx;
  padding: 20rpx;
}

/* 覆盖组件内部样式 */
.custom-plate .plate-item {
  border-color: #007aff;
}

.custom-plate .plate-item-active {
  border-color: #007aff;
  box-shadow: 0 0 0 2rpx rgba(0, 122, 255, 0.2);
}

.custom-plate .qwerty-key {
  background: #ffffff;
  border: 1rpx solid #e0e0e0;
}

.custom-plate .qwerty-key:active {
  background: #f0f0f0;
}
</style>

注意事项

  1. 车牌号格式：组件会自动处理普通车牌（7位）和新能源车牌（8位）
  2. 输入限制：严格按照中国车牌号规则限制输入
  3. 键盘布局：使用标准QWERTY布局，提升用户体验
  4. 删除逻辑：优化了删除逻辑，避免重复删除字符
  5. 响应式：适配不同屏幕尺寸，支持横竖屏切换

更新日志

v1.0.0

  • ✅ 基础车牌号输入功能
  • ✅ 支持普通车牌和新能源车牌
  • ✅ QWERTY键盘布局
  • ✅ 智能输入验证
  • ✅ 删除逻辑优化
  • ✅ 响应式设计

技术支持

如有问题或建议，请联系开发团队。

版本: 1.0.0
更新时间: 2025年9.30 兼容性: uni-app 2.0+

平台兼容性

车牌号输入组件 (PlateInput)

一个功能完整的车牌号输入组件，支持普通车牌和新能源车牌，提供QWERTY键盘布局和智能输入体验。

功能特性

  • ✅ 支持普通车牌（7位）和新能源车牌（8位）
  • ✅ 标准QWERTY键盘布局
  • ✅ 智能输入验证和自动跳转
  • ✅ 支持省份选择、字母数字混合输入
  • ✅ 删除逻辑优化，避免重复删除
  • ✅ 响应式设计，适配不同屏幕尺寸
  • ✅ 支持v-model双向绑定

安装使用

1. 引入组件

<template>
  <view>
    <plate-input 
      v-model="plateNumber" 
      placeholder="请输入车牌号"
      @change="onPlateChange"
      @focus="onFocus"
      @blur="onBlur"
    />
  </view>
</template>

<script>
import PlateInput from '@/components/plate-input/plate-input.vue'

export default {
  components: {
    PlateInput
  },
  data() {
    return {
      plateNumber: ''
    }
  },
  methods: {
    onPlateChange(value) {
      console.log('车牌号变化:', value)
    },
    onFocus() {
      console.log('输入框获得焦点')
    },
    onBlur() {
      console.log('输入框失去焦点')
    }
  }
}
</script>

API 文档

Props

参数 类型 默认值 说明
value String '' 车牌号值，支持v-model
placeholder String '请输入车牌号' 占位符文本

Events

事件名 说明 回调参数
input 车牌号输入时触发 (value: string)
change 车牌号变化时触发 (value: string)
focus 输入框获得焦点时触发 -
blur 输入框失去焦点时触发 -

车牌号规则

普通车牌（7位）

  • 第1位：省份简称（京、津、沪、渝等）
  • 第2位：字母（A-Z）
  • 第3-6位：字母或数字（A-Z, 0-9）
  • 第7位：字母（A-Z）

新能源车牌（8位）

  • 第1位：省份简称（京、津、沪、渝等）
  • 第2位：字母（A-Z）
  • 第3-6位：字母或数字（A-Z, 0-9）
  • 第7位：字母（A-Z）
  • 第8位：字母（A-Z）

键盘布局

省份选择

30个省份简称，采用6列网格布局：

京 津 沪 渝 冀 豫
云 辽 黑 湘 皖 鲁
新 苏 浙 赣 鄂 桂
甘 晋 蒙 陕 吉 闽
贵 粤 青 藏 川 宁

QWERTY键盘

标准QWERTY布局，数字独占一行：

数字行：

1 2 3 4 5 6 7 8 9 0

字母行：

Q W E R T Y U I O P
  A S D F G H J K L
    Z X C V B N M ←

使用示例

基础用法

<template>
  <view class="demo">
    <text class="title">车牌号输入</text>
    <plate-input v-model="plateNumber" />
    <text class="result">当前车牌号：{{ plateNumber }}</text>
  </view>
</template>

<script>
import PlateInput from '@/components/plate-input/plate-input.vue'

export default {
  components: { PlateInput },
  data() {
    return {
      plateNumber: ''
    }
  }
}
</script>

<style>
.demo {
  padding: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.result {
  font-size: 28rpx;
  color: #666;
  margin-top: 20rpx;
}
</style>

表单验证

<template>
  <view class="form">
    <plate-input 
      v-model="formData.plateNumber"
      @change="validatePlate"
    />
    <text v-if="plateError" class="error">{{ plateError }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        plateNumber: ''
      },
      plateError: ''
    }
  },
  methods: {
    validatePlate(value) {
      if (!value) {
        this.plateError = '请输入车牌号'
        return
      }

      if (value.length < 7) {
        this.plateError = '车牌号不完整'
        return
      }

      if (value.length > 8) {
        this.plateError = '车牌号格式错误'
        return
      }

      // 验证通过
      this.plateError = ''
      console.log('车牌号验证通过:', value)
    }
  }
}
</script>

自定义样式

<template>
  <view class="custom-plate">
    <plate-input v-model="plateNumber" />
  </view>
</template>

<style>
.custom-plate {
  /* 自定义容器样式 */
  background: #f5f5f5;
  border-radius: 12rpx;
  padding: 20rpx;
}

/* 覆盖组件内部样式 */
.custom-plate .plate-item {
  border-color: #007aff;
}

.custom-plate .plate-item-active {
  border-color: #007aff;
  box-shadow: 0 0 0 2rpx rgba(0, 122, 255, 0.2);
}

.custom-plate .qwerty-key {
  background: #ffffff;
  border: 1rpx solid #e0e0e0;
}

.custom-plate .qwerty-key:active {
  background: #f0f0f0;
}
</style>

注意事项

  1. 车牌号格式：组件会自动处理普通车牌（7位）和新能源车牌（8位）
  2. 输入限制：严格按照中国车牌号规则限制输入
  3. 键盘布局：使用标准QWERTY布局，提升用户体验
  4. 删除逻辑：优化了删除逻辑，避免重复删除字符
  5. 响应式：适配不同屏幕尺寸，支持横竖屏切换

更新日志

v1.0.0

  • ✅ 基础车牌号输入功能
  • ✅ 支持普通车牌和新能源车牌
  • ✅ QWERTY键盘布局
  • ✅ 智能输入验证
  • ✅ 删除逻辑优化
  • ✅ 响应式设计

技术支持

如有问题或建议，请联系开发团队。

版本: 1.0.0
更新时间: 2025年9.30 兼容性: uni-app 2.0+

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。