这样的需求是经常用到的。但是我们在用的时候却发现了一些问题:

<el-input v-model=”mobile”   placeholder=”手机号”  type=”number”  maxlength=”11″></el-input>

只能输入数字:type=”number”  

最长11位 : maxlength=”11″

如果写type=”number”  maxlength=”11″。的确只能输入数字但是maxlength=”11″的长度限制却失效了。

如果不写type=”number”用text。或者tel。maxlength=”11″的长度限制有用。但是却可以输入非数字。

我们可以在main.js里面写个全局的指令。用来限制只输入数字。

/* 自定义指令只能输入数字 使用 v-number-only*/

Vue.directive(‘numberOnly’, {

  bind: function(el) {  

    el.handler = function() {

      el.childNodes[1].value = el.childNodes[1].value.replace(/\D+/g, ”);//因为是elementui组件里使用的el.value获取不到我们输入的内容。然后我发现他的第一个孩子才是我们输入的手机号码的内容。

     

    }

    el.addEventListener(‘keyup‘, el.handler); //这里使用keyup。我开始用的input发现第一次输入拼音字母竟然是可以输入的。改成keyup就都不能输入非数字了

  },

  unbind: function(el) {

    el.removeEventListener(‘keyup‘, el.handler);

  }

})

然后使用

<el-input v-model=”mobile”   placeholder=”手机号”  v-number-only   maxlength=”11″></el-input>