# car-number-keyboard 

## [在线预览效果](https://ccnhm.github.io/car-number-keyboard/dist/index.html)


[https://ccnhm.github.io/car-number-keyboard/dist/index.html](https://ccnhm.github.io/car-number-keyboard/dist/index.html)

## 说明

```
该组件是与  'amfe-flexible' 'postcss-pxtorem' 配合使用的， 
主要依赖其rem转换  10rem=100%屏幕宽度 主要针对移动端
```

## 安装插件
 
```
npm install car-number-keyboard -S
npm install amfe-flexible -S
npm install postcss-pxtorem -D
```
 
## 引入并注册插件
 
```
main.js 中导入 rem 转换 和全局引入组件
import Vue from 'vue'
import 'amfe-flexible'
import carNumberKeyboard from 'car-number-keyboard'
import 'car-number-keyboard/lib/keyboard.css' // 引入样式
Vue.use(carNumberKeyboard)

在postcss.config.js中配置rem选项参数
module.exports = {
    plugins: {
      "postcss-pxtorem": {
        // 设计稿 375:37.5
        // 设计稿：750:75
        // Vant 是基于 375
        rootValue: 37.5,
        propList: ["*"]
      }
    }
  }
```
 
## 基本用法示例

```
在相关业务中使用组件
<carNumberKeyboard />
```
 
## Props
 
属性 | 说明 | 类型 | 默认值
:--- | :--- | :--- | :---
title | 标题 | String（可选） | true
value | 初始回填值 | String 或 Array（可选） | ""
HkCarNoSupport | 是否支持港澳车牌 | Boolean（可选） | true
completeHideKeyboard | 完成后自动收起键盘 | Boolean（可选） | true
autoCarNoTypeMatch | 初始回填值 | 是否根据车辆初始回填值自动识别为大陆车牌或港澳车牌 (此项设置需开启HkCarNoSupport:true) | true


## 方法
 
方法 | 说明 | 回调参数
:--- | :--- | :--- 
onChange | 键盘值改变回调 | (val,true or false) 当前车牌号值（数组类型）,是否是港澳车牌
onClose | 键盘关闭回调 | empty
 
## 车牌号规则

```
大陆车牌 首字母必须为汉字 蓝牌7位，新能源8位

港澳车牌 2~6位 全部可输入为字母或数字
```