1. 使用 type 类型为 number 的方法

  1. 如果使用max、min属性,则必须同时加上type=“number”;但输入框尾部会出现一个上下箭头,min和max只能控制用箭头输入的最大值最小值,对键盘打字输入是限制不住的。
  2. 推荐在表单输入业务时使用。
  • 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 一键清除属性;在表单中使用,还会导致表单校验失效。

  1. 在表格输入框时使用。
  • 实现代码如下
<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”

  1. 在表单中使用计数器
  • 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>
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐