vue实现复选功能

Vue 实现复选功能

基础实现

使用 v-model 绑定到数组实现多选功能。当复选框被选中时，其 value 会被添加到数组中；取消选中时，会从数组中移除。

<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: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' }
      ],
      selectedOptions: []
    }
  }
}
</script>

自定义组件

创建可复用的复选框组组件，通过 v-model 实现双向绑定。

<!-- CheckboxGroup.vue -->
<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        :value="option.value"
        @change="handleChange"
        :checked="modelValue.includes(option.value)"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleChange(e) {
      const value = e.target.value
      let newValue = [...this.modelValue]
      if (e.target.checked) {
        newValue.push(value)
      } else {
        newValue = newValue.filter(item => item !== value)
      }
      this.$emit('update:modelValue', newValue)
    }
  }
}
</script>

使用方法

<template>
  <checkbox-group 
    v-model="selectedFruits" 
    :options="fruitOptions"
  />
</template>

<script>
import CheckboxGroup from './CheckboxGroup.vue'

export default {
  components: { CheckboxGroup },
  data() {
    return {
      fruitOptions: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' }
      ],
      selectedFruits: []
    }
  }
}
</script>

全选功能

实现全选/取消全选功能，以及部分选中状态。

<template>
  <div>
    <label>
      <input 
        type="checkbox" 
        v-model="selectAll" 
        @change="toggleAll"
      >
      Select All
    </label>

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 1, label: 'Option 1' },
        { value: 2, label: 'Option 2' }
      ],
      selectedOptions: []
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedOptions.length === this.options.length
      },
      set(value) {
        this.selectedOptions = value ? this.options.map(opt => opt.value) : []
      }
    }
  },
  methods: {
    toggleAll() {
      this.selectAll = !this.selectAll
    }
  }
}
</script>

样式美化

使用 CSS 美化复选框，可以隐藏原生输入框，使用自定义样式。

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

<style>
.checkbox-container {
  display: flex;
  flex-direction: column;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
  border-radius: 3px;
}

.custom-checkbox:hover input ~ .checkmark {
  background-color: #ddd;
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.custom-checkbox .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
</style>

这些方法提供了从基础到高级的 Vue 复选功能实现，可以根据项目需求选择适合的方式。