Use input-plate-number

因为是使用的 touch 事件，所以目前自定义车牌键盘只支持移动端使用

PC 端则采用 input 输入框的形式用于处理用户输入车牌

安装

yarn add input-plate-number  / npm install input-plate-number / pnpm install input-plate-number

使用

因为是基于 Vue2.x 开发的组件库，所以只支持在 Vue2.x 项目中使用

// main.js
import InputPlateNumber from 'input-plate-number'
import 'input-plate-number/lib/input-plate-number.css'

Vue.use(InputPlateNumber)

<!-- template -->
<input-plate-number></input-plate-number>

API

slot

参数	说明
default	组件中 body 中自定义内容
header	组件头部进行自定义内容

props 传入参数

参数	说明	类型	默认值
wrapClass	最外层的 className	String	-
defaultPlateNumber	初始化时展示的车牌	String	浙B
keyboardVisible	是否显示自定义键盘	Boolean	true
energy	是否打开新能源开关	Boolean	false
isNoCar	是否打开无牌车适配	Boolean	false

Events

事件名	说明	回调函数
done	输入完成后触发 (移动端输入完成后则自动触发， PC 端需要按下回车键触发)	{ isPlateNum: Boolean,plateNum: String }
key-click	输入时触发 (移动端触摸自定义车牌键盘触发， PC 端输入框输入时自动触发)	{ curKey: String, plateNum: String }
del-click	删除时触发 （移动端触摸自定义删除键触发，PC 端按下 Backspace 回退键时触发）	{ plateNum: String }
inp-click	移动端触摸上方输入框的时候触发	{ curIdx: Number, plateNum: String }
change-energy	开关新能源模块滑块时触发	boolean
close	移动端关闭自定义键盘时触发	-

注意事项

• 如果要更改默认车牌应在 created 生命周期中进行处理，否则需要利用组件 key 特性进行重新渲染才会生效 (1.4.1之后版本已解决)
• 目前暂不支持 v-model 使用