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

Vue������������������Input������������������

���Vue���������������������������������������������������������������������������������������������������������������������������������������������������

���������������������������������������������

Vue���������������v-model������������ specialization ������������������������������������������������������v-model������������������ .number:

������������������������������������������������������������type="number"�����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

���������������������������������������

������������������������������������������������������������������������������������input���@input���������������:

���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

������������������������������

������������������������������������������������������������������������������������������������Vue������������������������������������:

// input.js
const addListener = function(el, type, fn) {
  el.addEventListener(type, fn, false);
};
// ������������
const spaceFilter = function(el) {
  addListener(el, 'input', () => {
    el.value = el.value.replace(/\s+/, '');
  });
};
// ������������������������������������������������������������������������������
const priceFilter = function(el) {
  addListener(el, 'input', () => {
    el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null;
    if (isNaN(el.value)) {
      el.value = '';
    }
  });
};
// ������������������������������������������������������
const integerLetterFilter = function(el) {
  addListener(el, 'input', () => {
    el.value = el.value.replace(/[\W]/g, '');
    el.dispatchEvent(new Event('input'));
  });
};
export default {
  bind(el, binding) {
    if (el.tagName.toLowerCase() !== 'input') {
      el = el.getElementsByTagName('input')[0];
    }
    spaceFilter(el);
    switch (binding.arg) {
      case 'price':
        priceFilter(el);
        break;
      case 'integerLetter':
        integerLetterFilter(el);
        break;
      default:
        console.warn('������������������', binding.arg);
        break;
    }
  }
};

������Vue���������������������������������������main.js������������:

// main.js
import inputFilter from '@/directives/InputFilter.js';
vue.directive('inputFilter', inputFilter);

������������������������:

������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

// input.js
// ���������
const debounce = (fn, delay) => {
  var delay = delay || 300;
  var timer;
  return function() {
    var th = this;
    var args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      timer = null;
      fn.apply(th, args);
    }, delay);
  };
};
// ������������������������������������������������������������������������������
const priceFilter = function(el) {
  addListener(el, 'keyup', debounce(() => {
    // ������������������������������������������������������������������"123.")���������������
    el.value = (el.value.match(/^\d*(?:\.\d{0,2})/g)[0]) || '';
    if (isNaN(el.value)) {
      el.value = '';
    }
    //������input���������������������������������������
    el.dispatchEvent(new Event('input'));
  }));
};

������������������������������������������������������������������������������������������������

���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

���������������������������������������������������������������������������������������������������������������������������������������������������������������������