更新记录

1.0.2（2025-10-20） 下载此版本

定制更灵活

1.0.1（2025-10-20） 下载此版本

更新属性文档

1.0.0（2025-10-20） 下载此版本

初始功能

平台兼容性

uni-app(4.66)

liaction-plate

一个用于展示中国车牌号的UniApp组件，支持普通车牌、新能源车牌、警车车牌和使馆车牌的展示，可自定义外观样式。

特性

• 支持普通车牌、新能源车牌
• 普通车牌显示省份简称和地区代码（前两个字符）
• 可自定义车牌背景色、文字颜色、尺寸等样式
• 提供车牌格式验证功能
• 响应式设计，适配不同屏幕尺寸
• 支持多种车牌类型，自动应用对应样式

属性

车牌格式说明

普通车牌

• 格式：省份简称+地区代码+5位数字/字母组合
• 示例：京A12345、沪B67890
• 显示特点：省份简称和地区代码（前两个字符）一起显示

新能源车牌

• 格式：省份简称+地区代码+6位数字/字母组合
• 最后一位可能是D或F等特殊字符
• 示例：皖A12345D、京B67890F
• 建议设置plateType="green"

警车车牌

• 格式：WJ+地区代码+单位代码+数字
• 示例：WJ12345、WJ徽A12345
• 建议设置plateType="white"

使馆车牌

• 格式：使+5位数字/字母组合
• 示例：使12345、使ABCDE
• 显示特点："使"字自动显示为红色
• 建议设置plateType="black"
• 可选添加plateMark="领"表示领馆车辆

使用示例

基本使用

<template>
  <view class="demo-container">
    <text class="demo-title">普通车牌示例</text>
    <liaction-plate plate="皖A12345"></liaction-plate>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

新能源车牌

<template>
  <view class="demo-container">
    <text class="demo-title">新能源车牌示例</text>
    <liaction-plate 
      plate="皖A12345D" 
      :isNewEnergy="true"
      plateType="green"
      plateMark="电"
    ></liaction-plate>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

使馆车牌

<template>
  <view class="demo-container">
    <text class="demo-title">使馆车牌示例</text>
    <liaction-plate 
      plate="使12345" 
      plateType="black"
    ></liaction-plate>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

### 领馆车牌（带标志）

```html
<template>
  <view class="demo-container">
    <text class="demo-title">领馆车牌示例</text>
    <liaction-plate 
      plate="使12345" 
      plateType="black"
      plateMark="领"
    ></liaction-plate>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

自定义样式

<template>
  <view class="demo-container">
    <text class="demo-title">自定义样式车牌</text>
    <liaction-plate 
      plate="京B67890" 
      :customColors="true"
      backgroundColor="#2E8B57" 
      textColor="#FFD700" 
      provinceBackgroundColor="#2E8B57"
      :borderRadius="8"
      :fontSize="40"
    ></liaction-plate>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

### 警车车牌

```html
<template>
  <view class="demo-container">
    <text class="demo-title">警车车牌示例</text>
    <liaction-plate 
      plate="WJ皖A12345" 
      plateType="white"
      plateMark="警"
    ></liaction-plate>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

### 多种车牌类型展示

```html
<template>
  <view class="demo-container">
    <text class="demo-title">多种车牌类型展示</text>

    <!-- 蓝色普通车牌 -->
    <view class="demo-item">
      <text class="demo-subtitle">蓝色普通车牌</text>
      <liaction-plate plate="京A12345"></liaction-plate>
    </view>

    <!-- 绿色新能源车牌 -->
    <view class="demo-item">
      <text class="demo-subtitle">绿色新能源车牌</text>
      <liaction-plate 
        plate="沪B67890D" 
        :isNewEnergy="true"
        plateType="green"
        plateMark="电"
      ></liaction-plate>
    </view>

    <!-- 白色警车车牌 -->
    <view class="demo-item">
      <text class="demo-subtitle">白色警车车牌</text>
      <liaction-plate 
        plate="WJ京A12345" 
        plateType="white"
        plateMark="警"
      ></liaction-plate>
    </view>

    <!-- 黑色使馆车牌 -->
    <view class="demo-item">
      <text class="demo-subtitle">黑色使馆车牌</text>
      <liaction-plate 
        plate="使12345" 
        plateType="black"
      ></liaction-plate>
    </view>

    <!-- 黑色领馆车牌 -->
    <view class="demo-item">
      <text class="demo-subtitle">黑色领馆车牌</text>
      <liaction-plate 
        plate="使12345" 
        plateType="black"
        plateMark="领"
      ></liaction-plate>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style scoped>
.demo-container {
  padding: 30rpx;
}
.demo-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  display: block;
  text-align: center;
}
.demo-item {
  margin-bottom: 30rpx;
  text-align: center;
}
.demo-subtitle {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}
</style>

## 注意事项

1. 组件会自动验证车牌格式，并在控制台输出警告（不影响显示）
2. 新能源车牌需要设置`isNewEnergy`为`true`
3. 为了获得最佳显示效果，建议使用标准格式的车牌号