vue 实现多选按钮

实现多选按钮的基础方法

使用 Vue 的 v-model 绑定数组可以实现多选功能。创建一个复选框组，将选中的值存储在数组中。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOptions: []
    }
  }
}
</script>

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

封装一个可复用的多选框组件，通过 props 接收选项列表，通过 emit 返回选中值。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        :checked="isChecked(option.value)"
        @change="handleChange(option.value, $event)"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    isChecked(optionValue) {
      return this.value.includes(optionValue)
    },
    handleChange(optionValue, event) {
      const newValue = [...this.value]
      if (event.target.checked) {
        newValue.push(optionValue)
      } else {
        const index = newValue.indexOf(optionValue)
        if (index > -1) {
          newValue.splice(index, 1)
        }
      }
      this.$emit('input', newValue)
    }
  }
}
</script>

使用第三方库实现高级多选功能

对于更复杂的需求，可以使用如 vue-multiselect 这样的第三方库，提供搜索、分组等高级功能。

安装依赖：

npm install vue-multiselect

使用示例：

<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options"
      :multiple="true"
      :close-on-select="false"
      placeholder="选择多个选项"
      label="label"
      track-by="value"
    ></multiselect>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  components: { Multiselect },
  data() {
    return {
      selected: [],
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ]
    }
  }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

样式定制与美化

通过 CSS 自定义多选框样式，提升用户体验。使用 label 和隐藏原生 input 实现自定义样式。

<template>
  <div class="checkbox-group">
    <label 
      v-for="option in options" 
      :key="option.value"
      :class="{ 'checked': selectedOptions.includes(option.value) }"
    >
      <input 
        type="checkbox" 
        v-model="selectedOptions" 
        :value="option.value"
        class="hidden-checkbox"
      >
      <span class="custom-checkbox"></span>
      {{ option.label }}
    </label>
  </div>
</template>

<style>
.hidden-checkbox {
  position: absolute;
  opacity: 0;
}

.custom-checkbox {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  margin-right: 8px;
  position: relative;
}

.checked .custom-checkbox {
  background-color: #42b983;
  border-color: #42b983;
}

.checked .custom-checkbox::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
</style>

表单验证集成

结合 Vue 的表单验证库（如 VeeValidate）实现多选框的必选验证。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selectedOptions" 
        :value="option.value"
        v-validate="'required'"
        name="options"
      >
      {{ option.label }}
    </label>
    <span v-show="errors.has('options')" class="error">
      {{ errors.first('options') }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    }
  }
}
</script>