vue input验证输入格式非数字删除

使用vue自定义指令

1.封装自定义指令

Vue.directive('numberOnly', {
	bind: function (el) {
		el.handler = function () {
			undefined
			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) {
		undefined
		el.removeEventListener('keyup', el.handler);
	}
})

2.挂载在带代码里 v-number-only

  <el-input
          maxlength="11"
          autocomplete="off"
          v-model="ruleForm.phome"
          v-number-only
        ></el-input>