elementui加减
ElementUI 加减组件实现方法
ElementUI 提供了 InputNumber 组件用于数字输入和加减操作，支持设置步长、最小值和最大值等属性。
基础用法
<el-input-number v-model="num" :min="1" :max="10"></el-input-number>带步长设置
<el-input-number
v-model="num"
:step="2"
:min="1"
:max="10">
</el-input-number>禁用状态
<el-input-number
v-model="num"
:disabled="true">
</el-input-number>精度控制
<el-input-number
v-model="num"
:precision="2">
</el-input-number>尺寸设置
<el-input-number
v-model="num"
size="mini">
</el-input-number>自定义加减按钮样式
可以通过 CSS 覆盖默认样式来自定义加减按钮的外观：
.el-input-number__decrease,
.el-input-number__increase {
background-color: #409EFF;
color: white;
}事件处理
InputNumber 组件提供了以下事件：
- change：值改变时触发
- blur：失去焦点时触发
- focus：获得焦点时触发
<el-input-number
v-model="num"
@change="handleChange">
</el-input-number>表单验证
结合 ElementUI 的 Form 组件可以实现数字输入验证：
<el-form :model="form" :rules="rules">
<el-form-item label="数量" prop="count">
<el-input-number v-model="form.count"></el-input-number>
</el-form-item>
</el-form>rules: {
count: [
{ type: 'number', required: true, message: '请输入数量', trigger: 'blur' }
]
}动态控制
可以通过计算属性或方法动态控制 InputNumber 的属性：
<el-input-number
v-model="num"
:min="dynamicMin"
:max="dynamicMax">
</el-input-number>键盘操作支持
组件默认支持键盘操作：
- 上箭头：增加数值
- 下箭头：减少数值
- PageUp：大幅增加数值
- PageDown：大幅减少数值
