segi-mext-car-plate2

segi-mext-car-plate

车牌输入插件

引用插件方法与普通第三方库的方法一致

  npm i segi-mext-car-plate

  import CarPlate from 'segi-mext-car-plate'
  
  Vue.use(CarPlate)

用组件方法使用

  <SG-Car-Plate :show="show" v-model="keysWords" @ok="onComplete" />

  public onComplete() {
    this.show = false
  }

  show: 组件显示 boolean
  v-model: 当前键盘输入的值 string
  change: 监听键盘输入，返回键盘输入字符串
  ok: 监听键盘‘完成’按钮，

用原型方法使用

  /** words：当前车牌已输入字段，必传，键盘挂载在全局下，每次关闭会销毁键盘dom节点，
   *  change: 监听键盘输入，返回键盘输入字符串,必传
   *  ok: 监听键盘‘完成’按钮,非必传
   *  show: 控制键盘显示，在需控制键盘失去焦点关闭时可用，非必传
   **/
  // 在使用input框获取焦点唤起车牌键盘时，会带起原生键盘，需调用事件，阻止原生键盘唤起
  (document as any).activeElement.blur()

  this.$SG_Car_Plate({
      words: this.keysWords,
      change: this.onChange,
      ok: this.Ok,
      show: this.show,
  })

  public onChange(val: string) {
    this.keysWords = val
  }

  public Ok(val: boolean) {
    this.show = val
  }