el-input 只能輸入數字並限制長度

在上一個博客中，有關於限制長度的使用，本文介紹限制只能輸入數字的方法

el-input 代碼如下：

<el-form-item label="賬號" required>
    <el-input v-model="form.tele" style="width:160px;" oninput="if(value.length>11)value=value.slice(0,11)" placeholder="請輸入賬號" type="number"></el-input>
    </el-form-item>

 

在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;
        }
      }
    });
  }
});

 

演示如下：