vue实现复选框逻辑

Vue 复选框基础实现

在 Vue 中实现复选框可以使用 v-model 指令绑定到数据属性。复选框的值通常是布尔类型，表示选中或未选中状态。

<template>
  <div>
    <input type="checkbox" v-model="isChecked" />
    <label>同意协议</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  }
}
</script>

多选框组实现

当需要处理多个复选框时，可以将 v-model 绑定到一个数组，数组中的元素对应选中的复选框的值。

<template>
  <div>
    <input type="checkbox" v-model="selectedFruits" value="apple" />
    <label>苹果</label>
    <input type="checkbox" v-model="selectedFruits" value="banana" />
    <label>香蕉</label>
    <input type="checkbox" v-model="selectedFruits" value="orange" />
    <label>橙子</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFruits: []
    }
  }
}
</script>

自定义复选框组件

可以创建可复用的复选框组件，通过 props 接收外部数据，通过 emit 事件通知父组件状态变化。

<template>
  <label>
    <input 
      type="checkbox"
      :checked="checked"
      @change="$emit('change', $event.target.checked)"
    />
    {{ label }}
  </label>
</template>

<script>
export default {
  props: {
    checked: Boolean,
    label: String
  }
}
</script>

复选框与计算属性结合

可以使用计算属性来处理复选框的复杂逻辑，例如全选/反选功能。

<template>
  <div>
    <input type="checkbox" v-model="allSelected" />
    <label>全选</label>
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id" />
      <label>{{ item.name }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  },
  computed: {
    allSelected: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value ? this.items.map(item => item.id) : []
      }
    }
  }
}
</script>

使用 Vuex 管理复选框状态

在大型应用中，可以使用 Vuex 集中管理复选框的状态。

// store.js
export default new Vuex.Store({
  state: {
    selectedOptions: []
  },
  mutations: {
    updateSelectedOptions(state, payload) {
      state.selectedOptions = payload
    }
  }
})

<template>
  <div>
    <input 
      type="checkbox" 
      v-model="isSelected" 
      @change="updateSelection"
    />
    <label>选择此项</label>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['selectedOptions']),
    isSelected: {
      get() {
        return this.selectedOptions.includes(this.optionId)
      },
      set(value) {
        this.updateSelectedOptions(
          value 
            ? [...this.selectedOptions, this.optionId]
            : this.selectedOptions.filter(id => id !== this.optionId)
        )
      }
    }
  },
  methods: {
    ...mapMutations(['updateSelectedOptions'])
  },
  props: {
    optionId: {
      type: Number,
      required: true
    }
  }
}
</script>

样式美化复选框

可以使用 CSS 隐藏原生复选框，通过伪元素创建自定义样式。

<template>
  <label class="custom-checkbox">
    <input type="checkbox" v-model="checked" />
    <span class="checkmark"></span>
    自定义样式复选框
  </label>
</template>

<style>
.custom-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
}

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

.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>