specifications

The background management system, using the element-UI el-input component, requires that only numbers be entered. The first method used is:

<el-input
 v-model.number='count'
 type='number'
 maxLength='9'
/>
Copy the code

Existing problems

1. MaxLength does not take effect. 2 11... 1Copy the code

Current solution (effective)

<el-input
 v-model='count'
 oninput="value=value.replace(/[^\d]/g,'')"
 maxLength='9'
/>
Copy the code

Current problems

When the re is used to restrict the input of only numbers, if one operation is in Chinese, it will cause the following operation to enter numbers, and the value of the V-model cannot be updated.Copy the code

expand

Let's keep a few decimal placesCopy the code
<el-input
 v-model='number'
 oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"
 maxLength='9'
/>
Copy the code

Here’s how I solved the problem that the V-model has no value

<el-input
 v-model='count'
 ref='ele'
 oninput="value=value.replace(/[^\d]/g,'')"
 maxLength='9'
/>

const elem = this.$refs.ele
if(elem.isOnComposition) {  // em.. In fact, this judgment can go
    this.count = elem.currentValue
}

Copy the code

Hope to see the big guy pointed out the problems or better solutions, thank you!