vue数字校验自定义指令

限制数字的自定义指令

限制最大值和最小值

• 只能限制最大值和最小值
• 限制输入正整数

使用方法

v-positiveInt="{min:1,max:1000000000}"

export default (Vue) => { 
  const trigger = (el, type) => { // 触发事件
    const e = document.createEvent('HTMLEvents'); // 创建事件
    e.initEvent(type, true, true); // 初始化事件
    el.dispatchEvent(e); // 触发事件
  };
  // 针对 el-input做的限制，只能输入正整数
  Vue.directive('positiveInt', {
    bind(el, binding) { 
      const { min, max } = _.get(binding, 'value', {}); // 获取最大值和最小值
      const input = el.getElementsByTagName('input')[0]; // 获取input
      input.onkeyup = function () {
        if (input.value.length === 1) {
          input.value = input.value.replace(/[^0-9]/g, ''); // 只能输入数字
        } else {
          input.value = input.value.replace(/[^\d]/g, ''); // 只能输入数字
        }
        if (min && input.value && Number(input.value) < Number(min)) { // 如果小于最小值，就设置为最小值
          input.value = min;
        }
        if (max && Number(input.value) > Number(max)) {   // 如果大于最大值，就设置为最大值
          input.value = max;
        }
        trigger(input, 'input');
      };
      input.onblur = function () {
        if (input.value.length === 1) {   // 如果只有一个字符，就设置为0
          input.value = input.value.replace(/[^0-9]/g, '');  
        } else { // 如果有多个字符，就只能输入数字
          input.value = input.value.replace(/[^\d]/g, '');
        }
        if (min && input.value && Number(input.value) < Number(min)) { // 如果小于最小值，就设置为最小值
          input.value = min;
        }
        if (max && Number(input.value) > Number(max)) { // 如果大于最大值，就设置为最大值
          input.value = max;
        }
        trigger(input, 'input'); // 触发input事件
      };
    }
  });
};
```javascript

• 限制保留xx位小数

使用方法

v-input-limit="'positive'"

export default {
  install(Vue) {
    let isComposing = false; // 中文输入法状态
    Vue.directive('input-limit', {
      bind(el, binding) {
        let input;
        if (el.tagName.toLowerCase() === 'input') { // 如果是input标签
          input = el;
        } else {
          input = el.querySelector('input'); // 如果不是input标签，找到input标签
        }
        if (!input) {
          return;
        }
        el.inputLimit = { // 保存input标签
          input,
          handleCompositionStart() { // 中文输入法开始输入
            isComposing = true;
          },
          handleCompositionUpdate() { // 中文输入法更新
            isComposing = true;
          },
          handleCompositionEnd(e) { // 中文输入法结束
            if (isComposing) { // 如果是中文输入法结束
              isComposing = false; // 重置状态
              el.inputLimit.handler(e); // 触发input事件
            }
          },
          handler(e) { // input事件
            if (isComposing) {
              return;
            }
            if (binding.value === 'positive') { // 正整数
              e.target.value = e.target.value.replace(/^-[1-9]\d*|\D|^0$/g, ''); // 不能输入负数、小数、0开头的数字
            } else { 
              const regexp = new RegExp(binding.value, 'g'); 
              e.target.value = e.target.value.replace(regexp, ''); 
            }
          }
        };
        input.addEventListener('input', el.inputLimit.handler); // 绑定input事件
        input.addEventListener('compositionstart', el.inputLimit.handleCompositionStart); // 绑定中文输入法事件
        input.addEventListener('compositionupdate', el.inputLimit.handleCompositionUpdate); // 绑定中文输入法事件
        input.addEventListener('compositionend', el.inputLimit.handleCompositionEnd); // 绑定中文输入法事件
      },

      unbind(el) {
        if (el.inputLimit) {
          el.inputLimit.input.removeEventListener('input', el.inputLimit.handler); // 解绑input事件
          el.inputLimit.input.removeEventListener('compositionstart', el.inputLimit.handleCompositionStart); // 解绑中文输入法事件
          el.inputLimit.input.removeEventListener('compositionupdate', el.inputLimit.handleCompositionUpdate); // 解绑中文输入法事件
          el.inputLimit.input.removeEventListener('compositionend', el.inputLimit.handleCompositionEnd); // 解绑中文输入法事件
        }
      }
    });
  }
};