vue使用自定义指令实现禁止非数字输入并全局使用

前言

当input的type为text的时候，又要禁止非数字输入，这听起来很矛盾是吧，但是偏偏又会有这种场景，因为v-model的值需要在输入为空时默认显示为 --，那只好通过js去处理了。

实现方法：

1.在main.js添加自定义指令，并挂载到需要用的组件

Vue.directive('numberOnly', {
    
  bind: function(el) {
    
    el.handler = function(e) {
    
      var keyCode = e.which || e.keyCode;
      var keyValue = String.fromCharCode(keyCode);
      // 判断输入的字符是否为数字，并且输入字符位数不超过3位
      if (!/^\d+$/.test(keyValue) || el.value.length >= 3) {
    
        e.preventDefault();
      }
    };
    el.addEventListener('keypress', el.handler);
  },
  unbind: function(el) {
    
    el.removeEventListener('keypress', el.handler);
  }
});

Vue.component('chart-page', {
    
  template: '<input v-number-only>',
  directives: {
    
    'number-only': {
    
      bind: function(el) {
    
        // 自定义指令的实现
      },
      unbind: function(el) {
    
        // 解绑自定义指令的事件监听器等
      }
    }
  }
});

2.在input里使用

				<input
                    v-model="singleValue"
                    @focus="focusSingle(singleValue)"
                    @blur="blurSingle(singleValue)"
                    :disabled="chartsDataFlag || inputAble"
                    v-number-only
                 />

这样在输入的时候，就不会出现那些不想要的字符。

上面的自定义指令不兼容移动端的，下面这个才是兼容移动端 ：

Vue.directive('numberOnly', {
    
  bind: function(el) {
    
    el.handler = function(e) {
    
      var value = el.value;
      var newValue = value.replace(/[^\d]/g, ''); // 将非数字字符替换为空字符串
      if (value !== newValue) {
    
        el.value = newValue;
        el.dispatchEvent(new Event('input')); // 触发input事件，通知Vue框架输入框的值已经改变
      }
      if (newValue.length > 3) {
    
        el.value = newValue.slice(0, 3); // 将输入框的值截断为三位数
        el.dispatchEvent(new Event('input')); // 触发input事件，通知Vue框架输入框的值已经改变
      }
    };
    el.addEventListener('click', function() {
    
      el.focus(); // 让输入框获取焦点
      el.addEventListener('input', el.handler); // 在click事件中注册input事件
    });
    el.addEventListener('blur', function() {
    
      el.removeEventListener('input', el.handler); // 在blur事件中取消input事件的注册
    });
  },
  unbind: function(el) {
    
    el.removeEventListener('click', el.handler);
    el.removeEventListener('blur', el.handler);
  }
});