vue-elementui限制input只能输入数字校验

说明

1. 关于@input.native，由于elementui中对html的属性做了封装，所以使用html的原生属性需要添加“.native”
2. @input.native=“formatNumber(‘keyword’)” // 正常英文输入法情况下输入框输入内容变化时对输入数据的处理
3. @compositionend.native=“formatNumber(‘keyword’)” // 中文输入法下输入内容变化时对输入数据的处理
4. formatNumber方法中，不通过this.value来直接修改输入的值，而是通过修改v-model绑定的变量来修改，这样在设置了maxlength限制的情况下，内容长度的统计才能正常（网上常见的 οninput=“value=value.replace(/[^\d]/g, ‘’)”，这种校验在限制了长度时，中文输入法下的替换会导致长度统计异常而无法输入的问题）

代码

html部分：

<el-input
   v-model="params.keyword"
   @input.native="formatNumber('keyword')"
   @compositionend.native="formatNumber('keyword')"
   maxlength="16"
 ></el-input>

js部分：

formatNumber(field) {
  this.params[field] = this.params[field].toString().replace(/[^\d]/g, "");
}