vue 实现多选按钮

实现多选按钮的基本方法

在Vue中实现多选按钮可以通过v-model绑定数组来管理选中状态。以下是一个基础示例：

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

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

使用计算属性优化

当需要处理复杂逻辑时，可以使用计算属性来派生选中状态：

<template>
  <div>
    <label v-for="fruit in fruits" :key="fruit">
      <input 
        type="checkbox" 
        :value="fruit" 
        v-model="selectedFruits"
      >
      {{ fruit }}
    </label>
    <p>Total selected: {{ totalSelected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Orange'],
      selectedFruits: []
    }
  },
  computed: {
    totalSelected() {
      return this.selectedFruits.length
    }
  }
}
</script>

自定义多选组件

对于更复杂的场景，可以创建可重用的多选组件：

<!-- MultiCheckbox.vue -->
<template>
  <div class="checkbox-group">
    <label v-for="item in items" :key="item[valueKey]">
      <input
        type="checkbox"
        :value="item[valueKey]"
        v-model="internalValue"
        @change="$emit('change', internalValue)"
      >
      {{ item[labelKey] }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    items: {
      type: Array,
      required: true
    },
    valueKey: {
      type: String,
      default: 'value'
    },
    labelKey: {
      type: String,
      default: 'label'
    }
  },
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

使用第三方库

对于更丰富的功能，可以考虑使用第三方组件库：

npm install vue-multiselect

<template>
  <multiselect
    v-model="value"
    :options="options"
    :multiple="true"
    :close-on-select="false"
    placeholder="Select items"
    label="name"
    track-by="name"
  ></multiselect>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  components: { Multiselect },
  data() {
    return {
      value: [],
      options: [
        { name: 'Option 1' },
        { name: 'Option 2' },
        { name: 'Option 3' }
      ]
    }
  }
}
</script>

样式定制

为多选按钮添加自定义样式：

<template>
  <div class="checkbox-container">
    <div 
      v-for="option in options"
      :key="option.value"
      class="checkbox-item"
      :class="{ 'is-selected': isSelected(option.value) }"
      @click="toggleOption(option.value)"
    >
      {{ option.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 1, label: 'Red' },
        { value: 2, label: 'Green' },
        { value: 3, label: 'Blue' }
      ],
      selectedValues: []
    }
  },
  methods: {
    isSelected(value) {
      return this.selectedValues.includes(value)
    },
    toggleOption(value) {
      const index = this.selectedValues.indexOf(value)
      if (index === -1) {
        this.selectedValues.push(value)
      } else {
        this.selectedValues.splice(index, 1)
      }
    }
  }
}
</script>

<style>
.checkbox-container {
  display: flex;
  gap: 10px;
}
.checkbox-item {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.checkbox-item.is-selected {
  background-color: #42b983;
  color: white;
}
</style>

这些方法涵盖了从基础实现到高级定制的不同场景，可以根据具体需求选择适合的方案。