Vue自定义指令实现input限制输入正整数

directive.js

 

import Vue from 'vue'
export default () => {
  Vue.directive('Int', {
    inserted: function (el) {
      console.log(el);
      el.addEventListener("keypress",function(e){
        console.log(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;
            }                            
        }
      });
    }
  });
}

 

在main.js  全局引入

import Directive from './directive'
Vue.use(Directive);

 

 

使用

 

  <td>
            <input type="tel" v-model.number="itemEight.droopValue" class="input" v-Int maxlength="5" />
          </td>