介紹

• vue-license-plate是一款基于vue的車(chē)牌號(hào)輸入控件。

項(xiàng)目中使用

• 下載

//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')

• 在需要的頁(yè)面中使用

licensePlate: "川A00001"
<LicensePlate v-model="licensePlate" @change="change"></LicensePlate>
change(val){
    console.log(val.array)  //數(shù)組形式
    console.log(val.value)  //字符串形式
    console.log(val.pass)     //是否驗(yàn)證通過(guò)
}

• 自定義車(chē)牌展示

<LicensePlate :borderRadius="6"
    @change="changeVal"
    v-model="licensePlate"
    :autoShow="false">
    <div class="custom">{{ licensePlate }}</div>
</LicensePlate>
//自定義時(shí) borderColor borderActiveColor borderWidth borderRadius  fontColor fontSize 無(wú)效
//自定義時(shí)點(diǎn)擊事件根據(jù)當(dāng)前長(zhǎng)度計(jì)算，即默認(rèn)選中最后一位

• 展示如下

  
  
  s1.png

API

Props

Events

完整代碼

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