vue车牌输入组件

介绍

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

项目中使用

• 下载

//vue2
npm install vue-license-plate

//vue3
npm install vue3-license-plate

• 在main.js中加入

//vue2
import LicensePlate from 'vue-license-plate'
import 'vue-license-plate/lib/licensePlate.css'
Vue.use(LicensePlate);

//vue3
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 无效
//自定义时点击事件根据当前长度计算，即默认选中最后一位

• 展示如下

  
  s1.png

API

Props

名字	类型	默认值	说明
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}

完整代码

• vue2版本 vue-license-plate
• vue3版本 vue3-license-plate
• 小程序版本 mp-license-plate