vue实现加减条

Vue 实现加减条

在 Vue 中实现加减条（即数字增减组件）可以通过以下方法完成：

基本实现

创建一个包含加减按钮和数字显示的组件，使用 v-model 进行双向绑定：

<template>
  <div class="counter">
    <button @click="decrement">-</button>
    <span>{{ value }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  methods: {
    increment() {
      this.$emit('input', this.value + 1);
    },
    decrement() {
      this.$emit('input', this.value - 1);
    }
  }
};
</script>

<style>
.counter {
  display: flex;
  align-items: center;
  gap: 8px;
}
.counter button {
  padding: 4px 8px;
  cursor: pointer;
}
</style>

使用 v-model

在父组件中通过 v-model 绑定数据：

<template>
  <div>
    <Counter v-model="count" />
    <p>当前值: {{ count }}</p>
  </div>
</template>

<script>
import Counter from './Counter.vue';

export default {
  components: { Counter },
  data() {
    return {
      count: 0
    };
  }
};
</script>

添加限制条件

可以增加最小值、最大值的限制：

<template>
  <div class="counter">
    <button @click="decrement" :disabled="value <= min">-</button>
    <span>{{ value }}</span>
    <button @click="increment" :disabled="value >= max">+</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: -Infinity
    },
    max: {
      type: Number,
      default: Infinity
    }
  },
  methods: {
    increment() {
      if (this.value < this.max) {
        this.$emit('input', this.value + 1);
      }
    },
    decrement() {
      if (this.value > this.min) {
        this.$emit('input', this.value - 1);
      }
    }
  }
};
</script>

使用计算属性优化

通过计算属性动态判断是否禁用按钮：

<script>
export default {
  props: {
    value: Number,
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 10
    }
  },
  computed: {
    isMin() {
      return this.value <= this.min;
    },
    isMax() {
      return this.value >= this.max;
    }
  },
  methods: {
    increment() {
      if (!this.isMax) {
        this.$emit('input', this.value + 1);
      }
    },
    decrement() {
      if (!this.isMin) {
        this.$emit('input', this.value - 1);
      }
    }
  }
};
</script>

支持自定义步长

允许用户自定义每次增减的步长：

<script>
export default {
  props: {
    value: Number,
    step: {
      type: Number,
      default: 1
    },
    min: Number,
    max: Number
  },
  methods: {
    increment() {
      const newValue = this.value + this.step;
      if (this.max === undefined || newValue <= this.max) {
        this.$emit('input', newValue);
      }
    },
    decrement() {
      const newValue = this.value - this.step;
      if (this.min === undefined || newValue >= this.min) {
        this.$emit('input', newValue);
      }
    }
  }
};
</script>

完整示例代码

<template>
  <div class="counter">
    <button @click="decrement" :disabled="isMin">-</button>
    <span>{{ value }}</span>
    <button @click="increment" :disabled="isMax">+</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    step: {
      type: Number,
      default: 1
    }
  },
  computed: {
    isMin() {
      return this.value <= this.min;
    },
    isMax() {
      return this.value >= this.max;
    }
  },
  methods: {
    increment() {
      if (!this.isMax) {
        this.$emit('input', this.value + this.step);
      }
    },
    decrement() {
      if (!this.isMin) {
        this.$emit('input', this.value - this.step);
      }
    }
  }
};
</script>

<style>
.counter {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}
.counter button {
  padding: 6px 12px;
  background: #f5f5f5;
  border: none;
  cursor: pointer;
  font-size: 16px;
}
.counter button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.counter span {
  padding: 0 12px;
  min-width: 30px;
  text-align: center;
}
</style>

这些方法可以根据需求灵活调整，实现一个功能完善的加减条组件。