这样的需求是经常用到的。但是我们在用的时候却发现了一些问题:
<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>
