vue3-license-plate

介绍

• vue3-license-plate是一款基于vue3的车牌号输入控件。

vue2版本

vue-license-plate

微信小程序版本

mp-license-plate

项目中使用

• 下载

npm install vue3-license-plate

• 在main.js中加入

import LicensePlate from 'vue3-license-plate'
import 'vue3-license-plate/lib/licensePlate.css'

createApp(App).use(LicensePlate).mount('#app')

• 在需要的页面中使用

licensePlate: "川A00001"

<LicensePlate v-model="licensePlate" @change="change"></LicensePlate>

change(val){
	console.log(val.array)	//数组形式
	console.log(val.value)	//字符串形式
	console.log(val.pass)	  //是否验证通过
}

• 自定义车牌展示

<LicensePlate :borderRadius="6"
							@change="changeVal"
							v-model="licensePlate"
							:autoShow="false">
						<div class="custom">{{ licensePlate }}</div>
</LicensePlate>
//自定义时 borderColor borderActiveColor borderWidth borderRadius  fontColor fontSize 无效
//自定义时点击事件根据当前长度计算，即默认选中最后一位

• 展示如下

API

Props

名字|类型|默认值|说明 --|--|--|-- v-model|String|""| 默认车牌号 autoShow|Boolean|false| 自动展示键盘 borderColor|String|#79aef3| 输入框边框颜色 borderActiveColor|String|#330aec| 输入框选中的边框颜色 borderWidth|Number|1| 边框宽度 borderRadius|Number|6| 边框圆角 fontColor|String|#333333| 文字颜色 fontSize|Number|16| 文字大小

Events

名字|说明|回调参数 --|--|-- @change|输入改变时触发|{array:[],value:string,pass:false}

Change Log

• 1.0.2

1、增加 '警'、'挂' 2、支持车牌slot

• 1.0.1

自动展示键盘

• 1.0.0

首次发版

License

MIT