本文共 1900 字，大约阅读时间需要 6 分钟。

基于Vue的简单车牌输入组件实现

功能展示

该车牌输入组件支持多种车牌结构输入，包括省份代码、数字和其他特殊字符。组件采用点击输入的方式，支持字符的逐步输入和删除操作。

代码结构

   ## 事件处理```javascriptclickInput(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) {  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.plateInput.input.value[this.plateInput.input.type] = undefined;  let nu = parseInt(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);  }}

数据模型

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', '学', '港', '澳']  }}

代码优化建议

转载地址：http://ksgwz.baihongyu.com/