Vue中输入框只能输入整数和小数

1. 在main.js中写一个指令

    //限制只能输入正整数,不包含小数
    Vue.directive('enterNumber', {
      inserted: function (el) {
        el.addEventListener("keypress",function(e){
          e = e || window.event;
          let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
          let re = /\d/;
          if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
              if(e.preventDefault){
                  e.preventDefault();
              }else{
                  e.returnValue = false;
              }                            
          }
        });
      }
    });
    
    //只能输入正整数及小数 包含小数点
    Vue.directive('enterNumber2', {
      inserted: function (el) {
        el.addEventListener("keypress",function(e){
          e = e || window.event;
          let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
          let re = /\d/;
          if(charcode == 46){
            if(el.value.includes('.')){
              e.preventDefault();
            }
            return;
          }else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
            if(e.preventDefault){
              e.preventDefault();
            }else{
                e.returnValue = false;
            }
          }
        });
      }
    });
    //有小可爱提出了是否能输入小数，我想了想，大概可以实现输入负数，但是并不是限制只能是负整数。有空我再思考下
   

   // 只能输入正负整数及小数 包含小数点
   Vue.directive('enterNumber3', {
     inserted: function (el) {
       el.addEventListener('keypress', function(e) {
         e = e || window.event
         const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
         const re = /\d/
         if (el.value === '' && charcode === 45) {
           return true;
         } else if (el.value !== '' && charcode === 45) {
           e.preventDefault();
           return false
         }
         if (charcode === 46) {
           if (el.value.includes('.')) {
             e.preventDefault()
           }
           return true
         } else if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
           if (e.preventDefault) {
             e.preventDefault()
           } else {
               e.returnValue = false
           }
         }
       })
     }
   })
   

2.使用方法

<input type="text" v-enter-number2 >
<input type="number" step="0.0000000001" v-enter-number > 
<input type="text" v-enter-number3 >
//在只允许输入正整数的情况下，type="number" 可以防止输入中文，step="0.0000000001" 可以处理输入小数时的“请输入有效值，两个.....”