el-input只能输入>0的整数
时间: 2023-07-04 07:03:54 浏览: 90
el-input限制输入框只能输入数字
可以通过设置 el-input 组件的属性来限制只能输入大于0的整数。你可以设置 type 属性为 number,同时设置 min 属性为 1,这样 el-input 就只能输入大于等于1的整数了。例如:
```html
<el-input type="number" min="1"></el-input>
```
另外,你还可以通过监听 el-input 的输入事件,在用户输入时进行验证,如果用户输入的是非法字符,就将其替换为空字符串。示例代码如下:
```html
<template>
<el-input v-model="value" @input="handleInput"></el-input>
</template>
<script>
export default {
data() {
return {
value: ''
}
},
methods: {
handleInput(val) {
// 只允许输入数字和小数点
this.value = val.replace(/[^\d.]/g, '')
// 将多个小数点替换成一个
this.value = this.value.replace(/\.{2,}/g, '.')
// 将第一个小数点之前的所有0去掉
this.value = this.value.replace(/^(0+)(\d+)/g, '$2')
// 将非零开头的数字前面的所有0去掉
this.value = this.value.replace(/^0+(\d+)/g, '$1')
// 将空字符串或.开头的字符串转换成0
if (this.value === '' || this.value === '.') {
this.value = 0
}
// 转换为数字类型
this.value = Number.parseFloat(this.value)
// 如果小于0则设为0
if (this.value < 0) {
this.value = 0
}
}
}
}
</script>
```
阅读全文