el-input只能输入正整数,不能输入小数点
时间: 2023-10-17 18:05:47 浏览: 96
正则文本框只能输入正整数
5星 · 资源好评率100%
你可以使用 `type="number"` 属性来限制输入框只能输入数字,然后使用 JavaScript 来监听用户输入,判断是否包含小数点,如果包含则阻止输入。以下是一个示例代码:
```html
<el-input v-model="inputValue" type="number" @input="handleInput"></el-input>
```
```javascript
export default {
data() {
return {
inputValue: ''
}
},
methods: {
handleInput(event) {
const value = event.target.value
if (value.includes('.')) {
event.target.value = value.replace('.', '')
this.inputValue = event.target.value
} else {
this.inputValue = value
}
}
}
}
```
上述代码中,我们监听了 `el-input` 组件的 `input` 事件,判断输入框的值是否包含小数点,如果包含,则使用 `replace` 方法将小数点替换为空字符,然后将修改后的值重新赋值给输入框。如果不包含小数点,则直接将输入框的值赋值给 `inputValue`。这样就实现了 el-input 只能输入正整数,不能输入小数点的需求。
阅读全文