vue车牌输入组件使用方法详解

一个简单的车牌输入组件（vue），供大家参考，具体内容如下

效果图：

vue代码：

event事件：

export let life = {
  created () {
    // this.currentPlate = this.plateNumber
    // console.log(this.plateNumber)
    // this.EnterPlateNumber.input.firstWord = this.plateNumber.slice(0,1)
    // this.EnterPlateNumber.input.secondWord = this.plateNumber.slice(1,2)
    // this.EnterPlateNumber.input.lastWords = this.plateNumber.slice(2,9)
  }
}
export let event = {
  clickInput (type) {
    this.methods('clickInput',type)
  },
  clickKeyboard (val) {
    if (this.plateInput.input.type === 'p2' && parseInt(val) >= 0 && parseInt(val) <= 9) return
    this.methods('clickKeyboard', val)
    this.methods('setPlateNumber')
    this.methods('setDirectIssuedPlateNumber')
  },
  //删除车牌
  clickDelete () {
    this.methods('clickDelete')
    this.methods('setPlateNumber')
    this.methods('setDirectIssuedPlateNumber')
  },
  hiddenKeybord(){
    this.methods('hiddenKeybord')
  },
  enterWord(){
    this.methods('enterWord')
  }
}
export let watch = {}

methods方法：

export default class {
  clickInput(type){
    this.plateInput.input.type = type
    this.plateInput.input.dialogVisible = true
  }
  hiddenKeybord(){
    this.plateInput.input.dialogVisible = false
  }
  enterWord(){
    this.plateInput.input.dialogVisible = false
  }
  clickKeyboard (val) {
    this.plateInput.input.value[this.plateInput.input.type] = val
    let type = this.plateInput.input.type.split('p')[1]
    if (type !== '8') {
      this.plateInput.input.type = 'p' + (parseInt(type) + 1)
    }
  }
  clickDelete () {
    this.plateInput.input.value[this.plateInput.input.type] = undefined
    let nu = this.plateInput.input.type.split('p')[1]-1
    if(nu>=0){
      this.plateInput.input.value['p'+nu] = undefined
    }
    let type = this.plateInput.input.type.split('p')[1]
    if (type !== '1') {
      this.plateInput.input.type = 'p' + (parseInt(type) - 1)
    }
  }
  setPlateNumber () {
    if (this.plateInput.input.plateNumber) {
      this.plateNumber1 = this.plateInput.input.plateNumber
    }else{
      this.plateNumber1 = undefined
    }
  }
  setDirectIssuedPlateNumber () {
    if (this.plateInput.input.plateNumber) {
      this.plateNumber1 = this.plateInput.input.plateNumber
    }else{
      this.plateNumber1 = undefined
    }
  }

}

model数据：

export let props = ['name','plateNumber','noRightPart']
export let model = {
  currentPlate:undefined,
  plateInput:{
    input:{
      value:{
        p1:'桂',
        p2:'B',
        p3:2,
        p4:2,
        p5:2,
        p6:2,
        p7:2,
        p8:0
      },
      type:'p1',
      dialogVisible:false
    }
  },
  Keyboard: {
    province: ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青','宁','新','台','港','澳','使','领','警','学'],
    number: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C','D', 'E', 'F', 'G','H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '学', '港', '澳']
  },
}
export let computed = {
  plateNumber1 : {
    get () {
      return this.plateNumber||''
    },
    set (val) {
      this.$emit('update:plateNumber', val)
    }
  }
}

因为这里用了独家的框架，所以根据需要把相应的生命周期函数放到正常的vue项目的位置，把event就写成正常的函数，methods就是i正常的methods里面的方法，model就是data里return的数据。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。