Checkbox 多选框

在一组备选项中进行多选。

基础用法

单选

表示两种状态之间的切换

vue
<template>
  <ap-checkbox v-model="base1"> 选项一 </ap-checkbox>
  <ap-checkbox v-model="base2"> 选项二 </ap-checkbox>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const base1 = ref(true)
const base2 = ref(true)
</script>

多选

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

vue
<template>
  <div class="wrapper">
    <div>当前选择的是:</div>
    <span class="wrapper-item" v-for="item in likes" :key="item">{{
      map[item]
    }}</span>
  </div>

  <div class="content">
    <ap-checkbox v-model="likes" value="apple">选项一：🍎</ap-checkbox>
    <ap-checkbox v-model="likes" value="banana">选项二：🍌</ap-checkbox>
    <ap-checkbox v-model="likes" value="pear">选项三：🍐</ap-checkbox>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const map = {
  apple: '🍎',
  banana: '🍌',
  pear: '🍐',
}
const likes = ref([])
</script>

<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.wrapper-item {
  margin-left: 10px;
}
.content {
  display: flex;
  gap: 10px;
}
</style>

禁用状态

多选框不可用状态。

设置 disabled 属性即可。

vue
<template>
  <ap-checkbox v-model="base1"> Not Disabled </ap-checkbox>
  <ap-checkbox v-model="base2" disabled> Disabled </ap-checkbox>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const base1 = ref(true)
const base2 = ref(true)
</script>

中间状态

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果

注意

indeterminate 属性和 modelValue 的值是不关联的，且该属性只用来展示样式所用，一般用于表示全选的状态.
全选的中间状态是只要选中一个就会出现中间态，全部选中中间态失效。中间态即为示例中横杠的样式

vue
<template>
  <div>
    <ap-checkbox
      v-model="isAll"
      :intermediate="intermediate"
      @change="handleAllCheckChange"
      >全选</ap-checkbox
    >
  </div>
  <div>
    <ap-checkbox
      v-for="city in cities"
      v-model="checkedCities"
      :key="city"
      :value="city"
      @change="handleChange"
      >{{ cityMap[city] }}</ap-checkbox
    >
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const cityMap = {
  shanghai: '上海',
  beijing: '北京',
  suzhou: '苏州',
  guangzhou: '广州',
}
const cities = ['shanghai', 'beijing', 'guangzhou', 'suzhou']
const isAll = ref(false)
const checkedCities = ref<string[]>([])
const intermediate = ref(false)

const handleAllCheckChange = val => {
  checkedCities.value = val ? cities : []
  intermediate.value = false
}
const handleChange = () => {
  const checkedLength = checkedCities.value.length
  isAll.value = cities.length === checkedLength
  intermediate.value = checkedLength > 0 && checkedLength < cities.length
}
</script>

状态

点击时改变 modelValue，indeterminate 要自己控制，一共有如下四个状态，避免出现都为True的情况

	选中	取消（空白）	中间态	无效（填满）
intermediate	false	false	true	true
modelValue	true	false	false	true

Checkbox Props

参数	类型	是否必传	说明	默认值
modelValue	string/number/boolean/array	是	选中的值	-
trueValue	number/string/boolean	否	选中的值	true
falseValue	number/string/boolean	否	未选中的值	false
value	number/string	否	modelValue 是数组时，选中时的值，如果不提供，将会降级使用 trueValue	undefined
disabled	boolean	否	禁用	false
indeterminate	number/string/boolean	否	中间状态，独立于 modelValue，需要用户手动控制	false

Checkbox 事件

事件名称	说明	参数
change	当绑定值变化时触发的事件	改变后的值

Checkbox 插槽

插槽名称	说明
default	自定义默认内容

Checkbox 多选框 ​

基础用法 ​

单选 ​

多选 ​

禁用状态 ​

中间状态 ​

Checkbox Props ​

Checkbox 事件 ​

Checkbox 插槽 ​