vue+elementui 项目中输入手机号，要求必须是数字限制最长11位 。type=“number“ 中maxlength失效

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

<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获取不到我们输入的内容。然后我发现他的第一个孩子才是我们输入的手机号码的内容。<