license-plate-vue

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>

参数

参数	说明	类型	可选值	默认值
v-model	表单对象，绑定车牌信息（不会校验是否输入完成）	String	-	-
limitProvince	可输入省份，如：京贵川	String	-	京津沪渝晋蒙吉黑苏浙皖闽赣鲁豫鄂湘粤桂琼川云藏青宁新港澳台甘辽冀贵陕
limitCity	可输入地区，如：QWER	String	-	QWERTYUIOPASDFGHJKLZXCVBNM
checkKeyBoardMap	控制车牌每一位能输入的内容（详见下方使用示例）	Function	-	-
isSave	是否显示保存按钮	Boolean	true false	true
isNewEnergy	是否需要输入新能源车牌	Boolean	true false	true

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

方法名	说明	参数
change	车牌数据改变时回调	车牌值
confirm	点击保存时	-