限制 el-input 只能实时输入数字。并能够通过校验

代码片段

   <el-form-item label="手机号码：" prop="mobile">
      <el-input clearable  maxlength="11" placeholder="请输入手机号码" v-model.trim="dialogForm.mobile" 
      oninput="value=value.replace(/\D/g,'')"  @blur="handleBlur"
    />
 </el-form-item>

输入框输入数值时自动触发校验，除开数字之外的都不显示到输入框中οninput=“value=value.replace(/\D/g,‘’)”

缺点： （ 其实就是bug ）

如果首次输入不是数字，会造成 v-model 绑定的数值为空，就算你清空输入框/关闭弹窗/去除校验后再次输入数字，一样为空。


解决方法：
为 input 添加一个失焦方法，@blur=“handleBlur” 失去焦点后重新赋值给绑定元素，@blur 方法会有一个参数，可通过 e.target.value 获取。

 // 失去焦点后，重新赋值
    handleBlur(e) {
     this.dialogForm.mobile= e.target.value;
    }