vue-car-keyboard

car-number-keyboard

在线预览效果

https://ccnhm.github.io/car-number-keyboard/dist/index.html

说明

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

安装插件

npm install vue-car-keyboard -S
npm install amfe-flexible -S
npm install postcss-pxtorem -D

引入并注册插件

main.js 中导入 rem 转换 和全局引入组件
import Vue from 'vue'
import 'amfe-flexible'
import vueCarKeyboard from 'vue-car-keyboard'
import 'car-number-keyboard/lib/keyboard.css' // 引入样式
Vue.use(vueCarKeyboard)

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

基本用法示例

在相关业务中使用组件
<vueCarKeyboard />

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位 全部可输入为字母或数字