elementui加减

elementui 数字加减组件实现

使用 Element UI 的 InputNumber 组件可以实现数字的加减功能。该组件内置了加减按钮，允许用户通过点击或键盘操作来增减数值。

<template>
  <el-input-number v-model="num" :min="1" :max="10"></el-input-number>
</template>

<script>
export default {
  data() {
    return {
      num: 1
    }
  }
}
</script>

自定义加减按钮样式

如果需要自定义加减按钮的外观，可以通过 CSS 覆盖默认样式：

.el-input-number__decrease, 
.el-input-number__increase {
  background-color: #409EFF;
  color: white;
}

禁用状态处理

设置 disabled 属性可以禁用加减功能：

<el-input-number v-model="num" :disabled="true"></el-input-number>

精度控制

通过 precision 属性控制小数位数：

<el-input-number v-model="num" :precision="2"></el-input-number>

事件监听

可以监听 change 事件获取数值变化：

<el-input-number v-model="num" @change="handleChange"></el-input-number>

<script>
methods: {
  handleChange(value) {
    console.log('新值:', value);
  }
}
</script>

键盘操作支持

组件支持键盘上下箭头增减数值，可通过 controls-position 调整按钮位置：

<el-input-number 
  v-model="num" 
  controls-position="right">
</el-input-number>