美文网首页
el-input限制只输入数字

el-input限制只输入数字

作者: 泡杯感冒灵 | 来源:发表于2020-08-19 17:14 被阅读0次

步骤1:mian.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;
        }
      }
    });
  }
});

步骤2:在组件上添加指令

    <el-input 
          v-model.number="item.inputCount" 
          placeholder="请输入人数"
          v-enter-number
    >
    </el-input>

相关文章

网友评论

      本文标题:el-input限制只输入数字

      本文链接:https://www.haomeiwen.com/subject/pmldjktx.html