多选框 Checkbox
在一组可选项中进行多项选择时使用，单独使用可以表示两种状态之间的切换，和 Switch 类似。
基本使用
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<template>
<n-checkbox :options="options" v-model:value="value" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const options = ref([
{
label: '北京市',
value: 1,
},
{
label: '纽约市',
value: 2,
},
{
label: '布宜诺斯艾利斯',
value: 3,
},
{
label: '伊斯坦布尔',
value: 4,
},
{
label: '拜占庭',
value: 5,
},
{
label: '君士坦丁堡',
value: 6,
},
])
const value = ref([2]) // 多选框v-model
watchEffect(() => {
console.log('value:', value.value)
})
</script>禁用
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const options = ref([
{
label: '北京市',
value: 1,
},
{
label: '纽约市',
value: 2,
},
{
label: '布宜诺斯艾利斯',
value: 3,
},
{
label: '伊斯坦布尔',
value: 4,
},
{
label: '拜占庭',
value: 5,
},
{
label: '君士坦丁堡',
value: 6,
},
])
const value = ref([2]) // 多选框v-model
</script>
<template>
<n-checkbox :options="options" v-model:value="value" disabled />
</template>全选
Check All
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watch, watchEffect, computed } from 'vue'
const options = ref([
{
label: '北京市',
value: 1,
},
{
label: '纽约市',
value: 2,
},
{
label: '布宜诺斯艾利斯',
value: 3,
},
{
label: '伊斯坦布尔',
value: 4,
},
{
label: '拜占庭',
value: 5,
},
{
label: '君士坦丁堡',
value: 6,
},
])
const value = ref([2]) // 多选框v-model
watchEffect(() => {
console.log('value:', value.value)
})
const checkAll = ref(false) // 全选v-model
const indeterminate = computed(() => {
// 全选样式控制
if (value.value.length > 0 && value.value.length < options.value.length) {
return true
} else {
return false
}
})
watch(checkAll, to => {
console.log('checkAll:', to)
if (to) {
value.value = options.value.map(option => option.value)
} else {
value.value = []
}
})
</script>
<template>
<n-checkbox class="mb10" :indeterminate="indeterminate" v-model:checked="checkAll">Check All</n-checkbox>
<br />
<n-checkbox :options="options" v-model:value="value" />
</template>
<style>
.mb10 {
margin-bottom: 10px;
}
</style>垂直排列
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const options = ref([
{
label: '北京市',
value: 1,
},
{
label: '纽约市',
value: 2,
},
{
label: '布宜诺斯艾利斯',
value: 3,
},
{
label: '伊斯坦布尔',
value: 4,
},
{
label: '拜占庭',
value: 5,
},
{
label: '君士坦丁堡',
value: 6,
},
])
const value = ref([2]) // 多选框v-model
watchEffect(() => {
console.log('value:', value.value)
})
</script>
<template>
<n-checkbox vertical :options="options" v-model:value="value" />
</template>自定义间距
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const options = ref([
{
label: '北京市',
value: 1,
},
{
label: '纽约市',
value: 2,
},
{
label: '布宜诺斯艾利斯',
value: 3,
},
{
label: '伊斯坦布尔',
value: 4,
},
{
label: '拜占庭',
value: 5,
},
{
label: '君士坦丁堡',
value: 6,
},
])
const value = ref([2]) // 多选框v-model
watchEffect(() => {
console.log('value:', value.value)
})
</script>
<template>
<n-checkbox :gap="24" :options="options" v-model:value="value" />
</template>API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| options | 复选元素数据 | Option[] | [] |
| disabled | 是否禁用所有复选框 | boolean | false |
| vertical | 是否垂直排列 | boolean | false |
| value(v-model) | 当前选中的值 | any[] | [] |
| gap | 多个单选框之间的间距，单位px，垂直排列时，间距即垂直间距 | number | 8 |
| indeterminate | 全选时的样式控制 | boolean | false |
| checked(v-model) | 是否全选 | boolean | false |
Option Type
| 名称 | 说明 | 类型 | 必传 |
|---|---|---|---|
| label | 选项名 | string | true |
| value | 选项值 | any | true |
| disabled | 是否禁用选项 | boolean | false |
Events
| 事件名称 | 说明 | 参数 |
|---|---|---|
| change | 变化时回调函数 | (value: any[]) => void |