Vue 自定义指令【限制数字输入】

Vue

main.js

  /**
   * v-text-only="{
   *   textType: '', // 需要限制是什么文本类型：num：限制只能是数字；double：限制只能是小数；regExp：限制根据自定义的正则表达式的规则来写
   *   doublePointNum: '', // 在textType是double类型下有效。表示限制小数点后有几位数
   *   regExp: '', // 在textType是regExp类型下有效。表示自定义的正则表达式的规则
   * }"
   */
  Vue.directive('textOnly', {
    bind: function (el, binding) {
      el.handler = function (e) {
        switch (binding.value.textType) {
          case 'num':
            // 数字类型
            e.target.value = e.target.value.replace(/\D+/, '');
            break;
          case 'double':
            let regexp = '^\\d*(\\.?\\d{0,{{doublePointNum}}})'.replace(/{{doublePointNum}}/g, binding.value.doublePointNum || 2);
            e.target.value = (e.target.value.match(new RegExp(regexp, 'g'))[0]) || '';
            break;
          case 'regExp':
            e.target.value = (e.target.value.match(new RegExp(binding.value.regExp, 'g'))[0]) || '';
            break;
        }
        e.target.dispatchEvent(new Event("input")); //调用input事件使vue v-model绑定更新,下面相同
      };
      el.addEventListener('keyup', el.handler);
    }
  });

.vue文件
自定义指令限制为数字：

<Input style="width: 250px;" type="text" v-text-only="{textType:'num'}" />

自定义指令限制为2位小数：

<Input style="width: 250px;" type="text" v-text-only="{textType:'double'}" />

自定义指令限制为3位小数：

<Input style="width: 250px;" type="text" v-text-only="{textType:'double', doublePointNum:'3'}" />

自定义指令是根据正则表达式：

<Input style="width: 250px;" type="text" v-text-only="{textType:'regExp', regExp:'^\\d*(\\.?\\d{0,2})'}" />