vue 实现按钮多选

Vue 实现按钮多选功能

实现按钮多选功能可以通过多种方式完成，以下是几种常见的方法：

使用 v-model 绑定数组

通过 v-model 绑定一个数组，当按钮被选中时，值会被添加到数组中，取消选中时则从数组中移除。

<template>
  <div>
    <button
      v-for="option in options"
      :key="option.value"
      @click="toggleSelection(option.value)"
      :class="{ active: selectedValues.includes(option.value) }"
    >
      {{ option.label }}
    </button>
    <p>Selected: {{ selectedValues }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' },
      ],
      selectedValues: [],
    };
  },
  methods: {
    toggleSelection(value) {
      if (this.selectedValues.includes(value)) {
        this.selectedValues = this.selectedValues.filter(v => v !== value);
      } else {
        this.selectedValues.push(value);
      }
    },
  },
};
</script>

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

使用复选框实现多选

利用 input type="checkbox" 结合 v-model 绑定数组，实现多选功能。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input
        type="checkbox"
        :value="option.value"
        v-model="selectedValues"
      />
      {{ option.label }}
    </label>
    <p>Selected: {{ selectedValues }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' },
      ],
      selectedValues: [],
    };
  },
};
</script>

使用自定义组件封装多选按钮

如果需要更灵活的按钮样式，可以封装一个自定义多选按钮组件。

<template>
  <div>
    <multi-select-button
      v-for="option in options"
      :key="option.value"
      :value="option.value"
      :label="option.label"
      v-model="selectedValues"
    />
    <p>Selected: {{ selectedValues }}</p>
  </div>
</template>

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

export default {
  components: { MultiSelectButton },
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' },
      ],
      selectedValues: [],
    };
  },
};
</script>

MultiSelectButton.vue 组件实现

<template>
  <button
    @click="toggle"
    :class="{ active: isSelected }"
  >
    {{ label }}
  </button>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
    modelValue: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    isSelected() {
      return this.modelValue.includes(this.value);
    },
  },
  methods: {
    toggle() {
      const newValue = [...this.modelValue];
      if (this.isSelected) {
        this.$emit('update:modelValue', newValue.filter(v => v !== this.value));
      } else {
        this.$emit('update:modelValue', [...newValue, this.value]);
      }
    },
  },
};
</script>

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

总结

• v-model 绑定数组：适用于简单的按钮多选场景。
• 复选框实现：适合需要原生复选框样式的场景。
• 自定义组件封装：适合需要高度定制化按钮样式的场景。