license-plate-vue v0.0.2

license-plate-vue

h5车牌编辑器

license-plate-vue 是一款基于vue的h5车牌编辑器，支持国内所有类型车牌的录入，支持动态禁用可输入内容。

安装

yarn add license-plate-vue
npm i license-plate-vue

使用

import LicensePlateVue from 'license-plate-vue'

export default {
  components: { LicensePlateVue },
  data () {
    return {
      licensePlate: ''
    }
  }
}
// html
<LicensePlateVue v-model="licensePlate" />

// 配合vant使用
<van-popup
  v-model="showPlate"
  @close="showPlate = false"
  position="bottom"
  safe-area-inset-bottom
  closeable
  style="border-radius: 15px 15px 0px 0px"
>
  <div class="plate-box">
    <div class="plate-title">新增/编辑车牌</div>
    <div class="tips"><span>温馨提示:</span> 最多只能预约1个车牌</div>
    <vehicle-plate v-model="licensePlate" @confirm="submit"></vehicle-plate>
  </div>
</van-popup>

参数

checkKeyBoardMap

/**
 * checkKeyBoardMap( iptKeyList, plateNum, activeIndex )
 * @parm iptKeyList 当前位置可选值列表 [{key: '贵', disabled: false}]
 * @parm plateNum 已输入的值 
 * @parm activeIndex 当前在输入的是第几位 可以通过这个更加灵活的控制输入的车牌
*/
checkKeyBoardMap( iptKeyList, plateNum, activeIndex ) {
  if(activeIndex === 3) {
    return iptKeyList.map(item => {
      item.disabled = !['A', 'B', 'C'].includes(item.key) // 第三位的'A', 'B', 'C' 不可选
      return item
    })
  } else {
    return iptKeyList
  }
}

Events