zb-plate-keyboard

v1.0.6

Published

25 days ago

UniApp + Vue2 车牌键盘组件，支持微信小程序、支付宝小程序、H5

0High
0Medium
0Low

cyzhi96

uniapp vue2 plate-keyboard keyboard 车牌车牌号微信小程序支付宝小程序 H5

zb-plate-keyboard 车牌键盘组件

基于 Vue2 的车牌号输入组件，兼容 UniApp 和纯 HTML 环境，支持微信小程序、支付宝小程序、H5。

特性

iOS 风格拟真键盘，3D 凸起按键 + 按压凹陷反馈
省份 / 字母 Tab 切换，自动切换至字符键盘
QWERTY 全键盘布局，行居中偏移模拟真实键盘
格子模式基于固定长度 8 数组，点击任意格子精准定位光标
支持新能源车牌 8 位输入
支持系统键盘切换
兼容 UniApp 多端和纯 Vue2+HTML 环境
支持 npm 安装和 script 外链引入

环境兼容

组件自动检测运行环境，兼容两种使用场景：

UniApp 环境

在 UniApp 项目中，组件使用：

view、text、image 组件标签
uni.request API（用于远程获取车牌号）
rpx 单位样式（自适应屏幕）

纯 HTML 环境

在纯 Vue2+HTML 项目中，组件自动切换为：

div、span、img HTML 标签
fetch API（用于远程获取车牌号）
vw 单位样式（动态注入，无需引入 zb-plate-keyboard.css）

样式自动注入原理：

组件在 mounted 时检测非 UniApp 环境
通过 JavaScript 动态注入 vw 单位的 CSS
解决 rpx 单位在纯 HTML 环境不生效的问题
移动端 H5 已修复 hover 状态持续问题（使用 @media (hover: hover) 媒体查询）

无需引入 zb-plate-keyboard.css，组件自动处理样式适配。

快速测试

纯 HTML 测试

项目包含测试文件，可直接在浏览器中打开：

# 方式一：直接打开
open test.html

# 方式二：本地服务器
npx serve .
# 访问 http://localhost:3000/test.html

UniApp 测试

使用 HBuilderX 打开项目，运行到浏览器或小程序。

安装

方式一：npm 安装

适用于 UniApp 项目、Vue2 项目。

1. 安装依赖

npm install zb-plate-keyboard

2. 按场景引入组件

场景一：普通 Vue2 / H5 打包项目

适用于 Vite、Webpack、Vue CLI 等常规 Vue2 项目。

全局注册：

// main.js
import Vue from 'vue'
import ZbPlateKeyboard from 'zb-plate-keyboard'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

Vue.component('zb-plate-keyboard', ZbPlateKeyboard)

局部注册：

<template>
  <zb-plate-keyboard v-model="plateNo" />
</template>

<script>
import ZbPlateKeyboard from 'zb-plate-keyboard'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

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

Vue.use 方式：

// main.js
import Vue from 'vue'
import ZbPlateKeyboard from 'zb-plate-keyboard'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

Vue.use(ZbPlateKeyboard)

场景二：uni-app H5

uni-app 编译到 H5 时，也建议优先使用包根入口：

import Vue from 'vue'
import ZbPlateKeyboard from 'zb-plate-keyboard'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

Vue.component('zb-plate-keyboard', ZbPlateKeyboard)

场景三：uni-app 微信小程序 / 支付宝小程序

小程序编译器不支持组件源码中的动态组件写法，因此不要使用包根入口：

import ZbPlateKeyboard from 'zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

export default {
  components: {
    ZbPlateKeyboard
  }
}

模板中正常使用：

<zb-plate-keyboard v-model="plateNo" mode="template" />

场景四：uni-app easycom

如果你的 uni-app 项目能正确识别 npm 包 easycom，也可以直接使用组件标签。

当前包内已经提供 easycom 映射和小程序静态组件入口：

zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue
package.json > easycom.custom

但不同 uni-app / HBuilderX 版本对 npm easycom 支持表现不完全一致。如果遇到仍然解析到 dist/zb-plate-keyboard.es 的情况，优先改回“场景三”的显式 .vue 引入方式。

UniApp 小程序说明

微信小程序、支付宝小程序端不要直接引用 dist/zb-plate-keyboard.es.js。

npm 安装后直接 import ZbPlateKeyboard from 'zb-plate-keyboard' 即可
包默认会优先解析到 CommonJS 入口，避免小程序运行时直接解析 ESM 失败
样式仍然正常引入：import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'
easycom 场景下，组件会映射到 zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue
发布时必须把 components/ 目录一起发到 npm

补充说明：上面“直接 import ZbPlateKeyboard from 'zb-plate-keyboard'”更适合普通 Vue2/H5。在 uni-app 微信小程序、支付宝小程序里，推荐使用“场景三”的显式 .vue 路径导入。

方式二：script 外链引入

适用于原生 HTML 页面、非打包项目。

1. 引入文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>车牌键盘示例</title>
  <!-- 引入 Vue -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
  <!-- 引入组件（样式由 JS 自动注入） -->
  <script src="https://cdn.xxx.com/zb-plate-keyboard/zb-plate-keyboard.umd.js"></script>
</head>
<body>
  <div id="app">
    <!-- 组件已自动注册，可直接使用 -->
    <zb-plate-keyboard v-model="plateNo" mode="template" />
  </div>
  
  <script>
    new Vue({
      el: '#app',
      data: {
        plateNo: ''
      }
    })
  </script>
</body>
</html>

2. 手动注册（可选）

如果 Vue 未全局暴露，可手动注册：

<script src="https://cdn.xxx.com/zb-plate-keyboard/zb-plate-keyboard.umd.js"></script>
<script>
  // 手动注册
  Vue.component('zb-plate-keyboard', ZbPlateKeyboard)
  
  new Vue({
    el: '#app',
    data: { plateNo: '' }
  })
</script>

编译

开发环境

要求

Node.js >= 14.18.0
npm >= 6.0.0

安装开发依赖

# 克隆项目
git clone https://github.com/xxx/zb-plate-keyboard.git

# 进入目录
cd zb-plate-keyboard

# 安装依赖
npm install

构建命令

# 构建生产版本
npm run build

# 开发模式（监听文件变化）
npm run dev

构建产物

构建完成后，dist/ 目录包含：

dist/
├── zb-plate-keyboard.es.js    # ESM 格式（现代打包工具）
├── zb-plate-keyboard.cjs.js   # CommonJS 格式（uni-app/小程序 npm 更友好）
├── zb-plate-keyboard.umd.js   # UMD 格式（用于 script 引入）
└── zb-plate-keyboard.css      # 样式文件

文件说明

| 文件名 | 格式 | 大小 | 使用场景 | |--------|------|------|----------| | zb-plate-keyboard.es.js | ESM | ~28KB | Vite/Webpack/Rollup 等现代打包工具 | | zb-plate-keyboard.cjs.js | CommonJS | - | uni-app npm 引入、微信/支付宝小程序更友好 | | zb-plate-keyboard.umd.js | UMD | ~19KB | script 外链引入、兼容 AMD/CommonJS | | zb-plate-keyboard.css | CSS | ~4.5KB | UniApp 环境样式（纯 HTML 环境无需引入） |

发布到 npm

1. 创建 Automation Token（推荐）

使用 Automation Token 可以绕过两步验证（2FA），无需每次输入 OTP：

步骤：

访问：https://www.npmjs.com/settings/你的用户名/tokens
点击 "Generate New Token" → "Classic Token"
选择 Automation 类型（关键：可绕过 2FA）
复制生成的 token（类似：npm_xxxxxxxxxxxxxxxx）
在项目根目录创建 .npmrc 文件：

# .npmrc 文件内容
//registry.npmjs.org/:_authToken=你的token
registry=https://registry.npmjs.org/

示例：

//registry.npmjs.org/:_authToken=npm_ABC123XYZ456
registry=https://registry.npmjs.org/

确保 .npmrc 不被提交到 Git：

# .gitignore 文件中添加
.npmrc

2. 发布命令（无需 OTP）

配置 token 后，可直接发布：

# 小版本更新（修复 bug）: 1.0.0 → 1.0.1
npm run publish:patch

# 中版本更新（新功能）: 1.0.0 → 1.1.0
npm run publish:minor

# 大版本更新（重大变更）: 1.0.0 → 2.0.0
npm run publish:major

# 快速发布（自动 patch）
npm run publish:quick

# 手动发布（不递增版本）
npm run publish:manual

3. 发布流程说明

自动化脚本会执行以下步骤：

检查 npm 认证（token 或 login）
自动递增版本号（修改 package.json）
构建项目（npm run build）
发布到 npm（自动使用 token，无需 OTP）

4. 验证认证状态

# 检查当前认证用户
npm whoami

# 应显示你的 npm 用户名

5. 验证发布

npm info zb-plate-keyboard

# 查看在线包
https://www.npmjs.com/package/zb-plate-keyboard

6. 版本历史

查看 CHANGELOG.md 了解版本更新历史。

发布到 CDN

将 dist/ 文件上传到 CDN：

# 示例：上传到阿里云 OSS
ossutil cp dist/ oss://your-bucket/zb-plate-keyboard/ -r

使用

UniApp 项目集成

H5 平台

<template>
  <view class="page">
    <zb-plate-keyboard
      mode="template"
      v-model="plateNo"
      :theme="themeConfig"
      @confirm="handleSubmit"
      @blur="handleBlur"
    />
    
    <button @tap="submit">提交</button>
  </view>
</template>

<script>
import ZbPlateKeyboard from 'zb-plate-keyboard'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

export default {
  components: { ZbPlateKeyboard },
  data() {
    return {
      plateNo: '',
      themeConfig: {
        primary: '#1677ff',
        border: '#ddd',
        activeBg: '#f5f5f5',
        textColor: '#333'
      }
    }
  },
  methods: {
    handleSubmit(value) {
      console.log('确认车牌：', value)
    },
    handleBlur() {
      console.log('键盘关闭')
    },
    submit() {
      if (this.plateNo.length < 7) {
        uni.showToast({ title: '请输入完整车牌号', icon: 'none' })
        return
      }
      // 提交逻辑
      uni.request({
        url: 'https://api.xxx.com/submit',
        method: 'POST',
        data: { plateNo: this.plateNo }
      })
    }
  }
}
</script>

微信小程序

<template>
  <view class="page">
    <zb-plate-keyboard
      mode="template"
      v-model="plateNo"
      :allow-native-keyboard="false"
      @confirm="handleConfirm"
    />
  </view>
</template>

<script>
export default {
  data() {
    return { plateNo: '' }
  },
  methods: {
    handleConfirm(value) {
      // 微信小程序特有逻辑
      wx.setStorageSync('plateNo', value)
    }
  }
}
</script>

系统键盘特性

使用系统键盘时，组件会自动处理：

字母自动转大写：输入的小写字母会自动转换为大写
例如：输入 京a123b → 自动转换为 京A123B
符合车牌号规范（字母部分必须大写）

支付宝小程序

<template>
  <view class="page">
    <zb-plate-keyboard
      mode="input"
      v-model="plateNo"
      placeholder="请输入车牌号"
    />
  </view>
</template>

<script>
export default {
  data() {
    return { plateNo: '' }
  }
}
</script>

原生 HTML 项目集成

完整示例（样式由组件自动注入，无需手动引入 CSS）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>车牌键盘 - 原生 HTML 示例</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
  <script src="https://cdn.xxx.com/zb-plate-keyboard/zb-plate-keyboard.umd.js"></script>
  <style>
    body { padding: 20px; background: #f5f5f5; }
    .container { max-width: 500px; margin: 0 auto; }
    .title { font-size: 18px; margin-bottom: 20px; }
    .result { margin-top: 20px; padding: 10px; background: #fff; }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <div class="title">车牌号输入</div>
      
      <!-- 格子模式 -->
      <zb-plate-keyboard
        mode="template"
        v-model="plateNo"
        @confirm="onConfirm"
      />
      
      <!-- 结果显示 -->
      <div class="result">
        <div>车牌号：{{ plateNo }}</div>
        <div>长度：{{ plateNo.length }}</div>
      </div>
      
      <!-- 控制按钮 -->
      <button @click="clear">清空</button>
      <button @click="setPlate">设置默认值</button>
    </div>
  </div>
  
  <script>
    new Vue({
      el: '#app',
      data: {
        plateNo: ''
      },
      methods: {
        onConfirm(value) {
          console.log('确认输入：', value)
          alert('车牌号：' + value)
        },
        clear() {
          this.plateNo = ''
        },
        setPlate() {
          this.plateNo = '京A12345'
        }
      }
    })
  </script>
</body>
</html>

远程获取车牌号

组件支持自动从远程接口获取车牌号并回填，支持异步 URL 挂载。

基础用法

<template>
  <zb-plate-keyboard
    mode="template"
    v-model="plateNo"
    :enable-remote-fetch="true"
    remote-fetch-url="https://api.xxx.com/get-default-plate"
    @remote-fetch-success="onSuccess"
    @remote-fetch-error="onError"
  />
</template>

<script>
export default {
  data() {
    return { plateNo: '' }
  },
  methods: {
    onSuccess(code) {
      console.log('获取成功：', code)
    },
    onError(err) {
      console.error('获取失败：', err)
    }
  }
}
</script>

异步 URL 挂载（延迟请求）

当请求 URL 需要参数（如用户 ID、订单 ID）时，支持异步赋值：

<template>
  <zb-plate-keyboard
    mode="template"
    v-model="plateNo"
    :enable-remote-fetch="true"
    :remote-fetch-url="fetchUrl"
    @remote-fetch-success="onSuccess"
  />
</template>

<script>
export default {
  data() {
    return {
      plateNo: '',
      userId: '',
      fetchUrl: ''  // 初始为空
    }
  },
  async created() {
    // 异步获取用户 ID
    this.userId = await this.getUserId()
    
    // URL 就绪后自动触发请求（无需手动调用）
    this.fetchUrl = `https://api.xxx.com/get-plate?userId=${this.userId}`
  },
  methods: {
    getUserId() {
      return Promise.resolve('123456')
    },
    onSuccess(code) {
      console.log('获取成功：', code)
    }
  }
}
</script>

特性说明：

监听 remoteFetchUrl 变化，从空变为有值时自动触发请求
当 value 为空且 enableRemoteFetch=true 时才会请求
使用 _hasFetched 标记避免重复请求
失败后自动重置标记，允许再次尝试

接口要求

方法：GET
响应格式：
- 纯文本："京" 或 "京A"
- JSON：{data: "京A"} 或 {plateCode: "京A"} 或 {result: "京A"}

自定义主题

<template>
  <zb-plate-keyboard
    mode="template"
    v-model="plateNo"
    :theme="customTheme"
  />
</template>

<script>
export default {
  data() {
    return {
      plateNo: '',
      customTheme: {
        primary: '#ff6b00',      // 主色（橙色）
        border: '#e0e0e0',       // 边框色
        activeBg: '#fff3e0',     // 选中背景色
        textColor: '#333'        // 文字颜色
      }
    }
  }
}
</script>

外部控制键盘

<template>
  <view>
    <input v-model="plateNo" @focus="showKeyboard" />
    
    <zb-plate-keyboard
      ref="keyboard"
      mode="custom"
      v-model="plateNo"
    />
  </view>
</template>

<script>
export default {
  data() {
    return { plateNo: '' }
  },
  methods: {
    showKeyboard() {
      this.$refs.keyboard.show()
    },
    hideKeyboard() {
      this.$refs.keyboard.hide()
    },
    setPlate() {
      // 设置车牌并定位光标
      this.$refs.keyboard.setPlateNum('粤B88888')
    }
  }
}
</script>

Props

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | value / v-model | String | '' | 车牌号值，支持双向绑定 | | mode | String | 'input' | 显示模式：input / template / custom | | maxlength | Number | 8 | 车牌最大位数 | | allowNativeKeyboard | Boolean | true | 是否允许切换系统键盘 | | autoSwitchKeyboard | Boolean | true | 输入省份后是否自动切换 | | placeholder | String | '' | 输入框模式占位文本 | | showBorder | Boolean | true | mode=input 时是否显示输入框边框 | | theme | Object | 见下方 | 主题色配置 | | showNewEnergyToggle | Boolean | true | 是否显示新能源切换按钮 | | disableIO | Boolean | true | 是否禁用字母 I 和 O | | enableRemoteFetch | Boolean | false | 是否开启远程获取 | | remoteFetchUrl | String | '' | 远程接口地址 |

theme 默认值

{
  primary: '#1677ff',
  border: '#ddd',
  activeBg: '#f5f5f5',
  textColor: '#333'
}

Events

| 事件名 | 参数 | 说明 | |--------|------|------| | input | value | 每次输入变化时触发 | | change | value | 值变化时触发 | | confirm | value | 确认输入时触发 | | focus | — | 键盘弹出时触发 | | blur | — | 键盘关闭时触发 | | delete | currentIndex | 删除字符时触发 | | remote-fetch-success | code | 远程获取成功 | | remote-fetch-error | error | 远程获取失败 |

Methods

| 方法名 | 参数 | 说明 | |--------|------|------| | show() | — | 显示键盘 | | hide() | — | 隐藏键盘 | | setPlateNum(val) | val: String | 设置车牌号并定位光标 | | fetchPlateCode() | — | 手动触发远程获取 |

模式说明

mode = input（输入框模式）

自带输入框，点击后弹出键盘。

<zb-plate-keyboard
  mode="input"
  v-model="plateNo"
  placeholder="请输入车牌号"
/>

无边框输入框：

<zb-plate-keyboard
  mode="input"
  v-model="plateNo"
  :show-border="false"
  placeholder="请输入车牌号"
/>

mode = template（格子模式）

显示车牌格子，点击格子弹出键盘。

<zb-plate-keyboard
  mode="template"
  v-model="plateNo"
/>

mode = custom（纯键盘模式）

不显示输入区域，需外部控制。

<zb-plate-keyboard
  ref="keyboard"
  mode="custom"
  v-model="plateNo"
/>

this.$refs.keyboard.show()
this.$refs.keyboard.hide()

键盘布局

省份面板

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

字符面板

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
港 澳 学 警 挂 领 使 ⌫

目录结构

zb-plate-keyboard/
├── src/
│   ├── index.vue       # 组件主文件（含 vw 样式注入）
│   ├── install.js      # Vue 插件安装（UMD 自动注册）
│   ├── api.js          # API 封装（uni.request/fetch）
│   └── env.js          # 环境检测（isUniApp）
├── dist/
│   ├── zb-plate-keyboard.es.js   # ESM 格式
│   ├── zb-plate-keyboard.umd.js  # UMD 格式（含 vw 样式）
│   └── zb-plate-keyboard.css                  # rpx 样式（UniApp 专用）
├── package.json
├── vite.config.js
└── README.md

样式适配机制

UniApp 环境

使用 rpx 单位（UniApp 自动适配不同屏幕宽度）：

.plate-keyboard-key {
  height: 80rpx;
  min-width: 60rpx;
}

需手动引入 zb-plate-keyboard.css：

import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

纯 HTML 环境

使用 vw 单位（组件动态注入）：

.plate-keyboard-key {
  height: 10.667vw;  /* 80rpx / 750 * 100 */
  min-width: 8vw;    /* 60rpx / 750 * 100 */
}

无需引入 CSS 文件，组件在 mounted 时自动检测环境并注入 vw 样式：

mounted() {
  if (!this._isUniApp && typeof document !== 'undefined') {
    this.injectH5AdaptStyles()  // 动态注入 vw 样式
    this.initWeixinFontSize()   // 微信字体锁定
  }
}

H5 Hover 状态修复

移动端 H5 点击后 hover 状态会持续存在，已通过媒体查询修复：

/* 只在支持 hover 的设备（桌面端）生效 */
@media (hover: hover) {
  .plate-keyboard-key:hover {
    opacity: 0.5;
    background: #d2d5db;
  }
}

/* 移动端使用 :active */
.plate-keyboard-key:active {
  opacity: 0.5;
  background: #d2d5db;
}

跨端兼容

组件使用 UniApp API，兼容多端：

// 使用 uni.request（替代 fetch）
uni.request({ url, method: 'GET' })

// 使用 uni.setStorageSync（替代 localStorage）
uni.setStorageSync('key', value)
uni.getStorageSync('key')

// 条件编译处理平台差异
// #ifdef H5
// H5 特有逻辑
// #endif

// #ifdef MP-WEIXIN
// 微信小程序特有逻辑
// #endif

// #ifdef MP-ALIPAY
// 支付宝小程序特有逻辑
// #endif

兼容性

| 平台 | 支持状态 | 说明 | |------|----------|------| | 纯 HTML + Vue2 | ✅ | 直接 script 引入 | | UniApp H5 | ✅ | HBuilderX 运行 | | 微信小程序 | ✅ | HBuilderX 运行 | | 支付宝小程序 | ✅ | HBuilderX 运行 | | App | ✅ | HBuilderX 运行 |

注意事项

格子模式默认新能源 8 位
键盘无遮罩层，只能通过"完成"按钮关闭
删除键图标使用远程 CDN 地址
远程回填使用 uni.request，兼容多端
script 引入时需先引入 Vue
纯 HTML 环境无需引入 zb-plate-keyboard.css（组件自动注入 vw 样式）
UniApp 环境需引入 zb-plate-keyboard.css（rpx 单位）
H5 环境已修复 hover 状态持续问题（使用媒体查询）
vw 转换公式：rpx / 750 * 100 vw（750rpx = 100vw）
系统键盘自动转大写：输入字母自动转为大写，符合车牌号规范

常见问题

Q: 小程序中样式不生效？

A: 确保引入了 zb-plate-keyboard.css，小程序需要在 app.vue 或页面中引入：

import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

Q: 纯 HTML 环境样式不生效？

A: 纯 HTML 环境不需要引入 zb-plate-keyboard.css，组件会自动注入 vw 单位样式。如果样式仍不生效，请检查：

Vue 是否正确引入（先于组件）
浏览器控制台是否有错误

Q: UMD 引入后组件未注册？

A: 确保 Vue 先于组件引入，组件会自动检测 window.Vue 并注册。

Q: 如何修改键盘颜色？

A: 通过 theme prop 自定义颜色配置。

Q: 如何在 UniApp easycom 中使用？

A: 将组件放到 components/zb-plate-keyboard/ 目录，命名为 zb-plate-keyboard.vue。

Q: 微信小程序 / 支付宝小程序里为什么会解析到 `dist/zb-plate-keyboard.es`？

A: 这通常说明当前项目是通过“包根入口”在注册组件，例如：

import ZbPlateKeyboard from 'zb-plate-keyboard'

在 uni-app 小程序编译场景里，这种写法可能让编译器直接回退到 npm 包的 module 入口，最终把组件路径解析成：

/node-modules/zb-plate-keyboard/dist/zb-plate-keyboard.es

修复方式：改为显式引入小程序静态组件入口。

import ZbPlateKeyboard from 'zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

Q: 报错 `component not found` 怎么办？

A: 先按下面顺序排查：

确认使用的是新版本 npm 包，且包内存在：

node_modules/zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue

确认项目里不是旧缓存：删除 unpackage/ 后重新编译。
确认引入路径没有写成：

import ZbPlateKeyboard from 'zb-plate-keyboard/dist/zb-plate-keyboard.es.js'

正确写法是：

import ZbPlateKeyboard from 'zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue'

Q: 报错 `暂不支持动态组件[undefined]` 怎么办？

A: 这是小程序编译器不支持动态组件造成的。旧版组件模板里如果存在：

<component :is="tagName('view')">

就可能在编译微信小程序、支付宝小程序时失败。

当前包已经为 uni-app 小程序提供了静态模板版入口：

zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue

所以只要改成显式引入这个 .vue 文件即可。

Q: easycom 为什么有时不生效？

A: easycom 对 npm 包的扫描和映射，和 uni-app / HBuilderX 版本有关，不同项目表现可能不一致。

当前包已经包含：

package.json > easycom
components/zb-plate-keyboard/zb-plate-keyboard.vue

但如果你的项目仍然没有自动识别，建议直接使用显式导入，不要继续依赖 easycom 自动发现：

import ZbPlateKeyboard from 'zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue'

Q: 纯 HTML + Vue2 会不会受小程序兼容改造影响？

A: 不会。

纯 HTML + Vue2 仍然使用 UMD 产物：

<script src="https://cdn.xxx.com/zb-plate-keyboard/zb-plate-keyboard.umd.js"></script>

这次新增的是 uni-app 小程序专用 .vue 入口，不影响原有 dist/zb-plate-keyboard.umd.js 的使用。

Q: H5 点击后按钮状态异常？

A: 已修复，使用 @media (hover: hover) 媒体查询，移动端不再有 hover 状态持续问题。

Q: vw 单位如何计算？

A: 转换公式：vw = rpx / 750 * 100，例如：

80rpx = 10.667vw
60rpx = 8vw
2rpx = 0.267vw

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

zb-plate-keyboard 车牌键盘组件

特性

环境兼容

UniApp 环境

纯 HTML 环境

快速测试

纯 HTML 测试

UniApp 测试

安装

方式一：npm 安装

1. 安装依赖

2. 按场景引入组件

场景一：普通 Vue2 / H5 打包项目

场景二：uni-app H5

场景三：uni-app 微信小程序 / 支付宝小程序

场景四：uni-app easycom

UniApp 小程序说明

方式二：script 外链引入

1. 引入文件

2. 手动注册（可选）

编译

开发环境

要求

安装开发依赖

构建命令

构建产物

文件说明

发布到 npm

1. 创建 Automation Token（推荐）

2. 发布命令（无需 OTP）

3. 发布流程说明

4. 验证认证状态

5. 验证发布

6. 版本历史

发布到 CDN

使用

UniApp 项目集成

H5 平台

微信小程序

系统键盘特性

支付宝小程序

原生 HTML 项目集成

远程获取车牌号

基础用法

异步 URL 挂载（延迟请求）

接口要求

自定义主题

外部控制键盘

Props

theme 默认值

Events

Methods

模式说明

mode = input（输入框模式）

mode = template（格子模式）

mode = custom（纯键盘模式）

键盘布局

省份面板

字符面板

目录结构

样式适配机制

UniApp 环境

纯 HTML 环境

H5 Hover 状态修复

跨端兼容

兼容性

注意事项

常见问题

Q: 小程序中样式不生效？

Q: 纯 HTML 环境样式不生效？

Q: UMD 引入后组件未注册？

Q: 如何修改键盘颜色？

Q: 如何在 UniApp easycom 中使用？

Q: 微信小程序 / 支付宝小程序里为什么会解析到 dist/zb-plate-keyboard.es？

Q: 微信小程序 / 支付宝小程序里为什么会解析到 `dist/zb-plate-keyboard.es`？

Q: 报错 `component not found` 怎么办？

Q: 报错 `暂不支持动态组件[undefined]` 怎么办？