el-input 输入框只能输入数字且大于0的两种方式
el-input 输入框只能输入数字且大于0的两种方式
·
1. 使用 type 类型为 number 的方法
- 如果使用max、min属性,则必须同时加上type=“number”;但输入框尾部会出现一个上下箭头,min和max只能控制用箭头输入的最大值最小值,对键盘打字输入是限制不住的。
- 推荐在表单输入业务时使用。
- min:最小值为0,但对键盘输入无效;如果不显示上下箭头,可以不写。
- type: 让其只能输入数字
- oninput:如果输入的值小于0,让它为0
- 实现代码如下
<el-form-item label="数量" prop="number" align="center">
<el-input
clearable
v-model="ruleForm.number"
type="number"
oninput="if(value<0)value=0"
></el-input>
// 也可以使用 οninput="if(value<0)value=''" 不会有数字0,好看点
</el-form-item>
// 让输入框上下箭头不显示
<style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
::v-deep input[type='number'] {
-moz-appearance: textfield !important;
}
</style>
2. 使用 InputNumber 计数器
使用计数器缺点:不能使用 clearable 一键清除属性;在表单中使用,还会导致表单校验失效。
- 在表格输入框时使用。
- 实现代码如下
<el-table-column prop="applyNumber" label="数量" align="center" width="150px">
<template #default="scope">
<el-input-number
v-model="scope.row.applyNumber"
:controls="false"
:min="0"
/>
</template>
</el-table-column>
注:要让加减号不显示,必须设置 :controls=“false”
- 在表单中使用计数器
- style=“width: 100%”,保证加减号不显示时,左右不会留空白
- precision:数值精度
- value-on-clear (> 2.2.0):当输入框被清空时显示的值
<el-form-item label="金额" prop="number">
<el-input-number
v-model.number="ruleForm.number"
:precision="2"
:controls="false"
style="width: 100%"
placeholder="请输入金额"
:disabled="pageType == 'detailPage'"
:min="0"
:value-on-clear="0"
>
</el-input-number>
</el-form-item>
更多推荐
所有评论(0)