介紹

• 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)  //數(shù)組形式
    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 無效
//自定義時點擊事件根據(jù)當前長度計算，即默認選中最后一位

• 展示如下

  
  
  s1.png

API

Props

Events

完整代碼

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