在一組備選項(xiàng)中進(jìn)行多選。
通過以下方式來全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。
import { createApp } from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';
const app = createApp();
app.use(Checkbox);
app.use(CheckboxGroup);
通過 ?v-model
? 綁定復(fù)選框的勾選狀態(tài)。
<van-checkbox v-model="checked">復(fù)選框</van-checkbox>
import { ref } from 'vue';
export default {
setup() {
const checked = ref(true);
return { checked };
},
};
通過設(shè)置 ?disabled
? 屬性可以禁用復(fù)選框。
<van-checkbox v-model="checked" disabled>復(fù)選框</van-checkbox>
將 ?shape
? 屬性設(shè)置為 ?square
?,復(fù)選框的形狀會(huì)變成方形。
<van-checkbox v-model="checked" shape="square">復(fù)選框</van-checkbox>
通過 ?checked-color
? 屬性設(shè)置選中狀態(tài)的圖標(biāo)顏色。
<van-checkbox v-model="checked" checked-color="#ee0a24">復(fù)選框</van-checkbox>
通過 ?icon-size
? 屬性可以自定義圖標(biāo)的大小。
<van-checkbox v-model="checked" icon-size="24px">復(fù)選框</van-checkbox>
通過 ?icon
? 插槽自定義圖標(biāo),可以通過 ?slotProps
? 判斷是否為選中狀態(tài).
<van-checkbox v-model="checked">
自定義圖標(biāo)
<template #icon="props">
<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
</template>
</van-checkbox>
<style>
.img-icon {
height: 20px;
}
</style>
import { ref } from 'vue';
export default {
setup() {
const checked = ref(true);
return {
checked,
activeIcon:
'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
inactiveIcon:
'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
};
},
};
設(shè)置 ?label-disabled
? 屬性后,點(diǎn)擊圖標(biāo)以外的內(nèi)容不會(huì)觸發(fā)復(fù)選框切換。
<van-checkbox v-model="checked" label-disabled>復(fù)選框</van-checkbox>
復(fù)選框可以與復(fù)選框組一起使用,復(fù)選框組通過 ?v-model
? 數(shù)組綁定復(fù)選框的勾選狀態(tài)。
<van-checkbox-group v-model="checked">
<van-checkbox name="a">復(fù)選框 a</van-checkbox>
<van-checkbox name="b">復(fù)選框 b</van-checkbox>
</van-checkbox-group>
import { ref } from 'vue';
export default {
setup() {
const checked = ref(['a', 'b']);
return { checked };
},
};
將 ?direction
? 屬性設(shè)置為 ?horizontal
? 后,復(fù)選框組會(huì)變成水平排列。
<van-checkbox-group v-model="checked" direction="horizontal">
<van-checkbox name="a">復(fù)選框 a</van-checkbox>
<van-checkbox name="b">復(fù)選框 b</van-checkbox>
</van-checkbox-group>
import { ref } from 'vue';
export default {
setup() {
const checked = ref([]);
return { checked };
},
};
通過 ?max
? 屬性可以限制復(fù)選框組的最大可選數(shù)。
<van-checkbox-group v-model="checked" :max="2">
<van-checkbox name="a">復(fù)選框 a</van-checkbox>
<van-checkbox name="b">復(fù)選框 b</van-checkbox>
<van-checkbox name="c">復(fù)選框 c</van-checkbox>
</van-checkbox-group>
通過 ?CheckboxGroup
? 實(shí)例上的 ?toggleAll
? 方法可以實(shí)現(xiàn)全選與反選。
<van-checkbox-group v-model="checked" ref="checkboxGroup">
<van-checkbox name="a">復(fù)選框 a</van-checkbox>
<van-checkbox name="b">復(fù)選框 b</van-checkbox>
<van-checkbox name="c">復(fù)選框 c</van-checkbox>
</van-checkbox-group>
<van-button type="primary" @click="checkAll">全選</van-button>
<van-button type="primary" @click="toggleAll">反選</van-button>
import { ref } from 'vue';
export default {
setup() {
const checked = ref([]);
const checkboxGroup = ref(null);
const checkAll = () => {
checkboxGroup.value.toggleAll(true);
}
const toggleAll = () => {
checkboxGroup.value.toggleAll();
},
return {
checked,
checkAll,
toggleAll,
checkboxGroup,
};
},
};
搭配單元格組件使用時(shí),需要再引入 ?Cell
? 和 ?CellGroup
? 組件,并通過 ?Checkbox
? 實(shí)例上的 toggle 方法觸發(fā)切換。
<van-checkbox-group v-model="checked">
<van-cell-group inset>
<van-cell
v-for="(item, index) in list"
clickable
:key="item"
:title="`復(fù)選框 ${item}`"
@click="toggle(index)"
>
<template #right-icon>
<van-checkbox
:name="item"
:ref="el => checkboxRefs[index] = el"
@click.stop
/>
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
import { ref, onBeforeUpdate } from 'vue';
export default {
setup() {
const checked = ref([]);
const checkboxRefs = ref([]);
const toggle = (index) => {
checkboxRefs.value[index].toggle();
};
onBeforeUpdate(() => {
checkboxRefs.value = [];
});
return {
list: ['a', 'b'],
toggle,
checked,
checkboxRefs,
};
},
};
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
v-model | 是否為選中狀態(tài) | boolean | false
|
name | 標(biāo)識(shí)符,通常為一個(gè)唯一的字符串或數(shù)字 | any | - |
shape | 形狀,可選值為 square
|
string | round
|
disabled | 是否禁用復(fù)選框 | boolean | false
|
label-disabled | 是否禁用復(fù)選框文本點(diǎn)擊 | boolean | false
|
label-position | 文本位置,可選值為 left
|
string | right
|
icon-size | 圖標(biāo)大小,默認(rèn)單位為 px
|
number | string | 20px
|
checked-color | 選中狀態(tài)顏色 | string | #1989fa
|
bind-group | 是否與復(fù)選框組綁定 | boolean | true
|
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
v-model | 所有選中項(xiàng)的標(biāo)識(shí)符 | any[] | - |
disabled | 是否禁用所有復(fù)選框 | boolean | false
|
max | 最大可選數(shù),0 為無限制 |
number | string | 0
|
direction | 排列方向,可選值為 horizontal
|
string | vertical
|
icon-size | 所有復(fù)選框的圖標(biāo)大小,默認(rèn)單位為 px
|
number | string | 20px
|
checked-color | 所有復(fù)選框的選中狀態(tài)顏色 | string | #1989fa
|
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
change | 當(dāng)綁定值變化時(shí)觸發(fā)的事件 | checked: boolean |
click | 點(diǎn)擊復(fù)選框時(shí)觸發(fā) | event: MouseEvent |
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
change | 當(dāng)綁定值變化時(shí)觸發(fā)的事件 | names: any[] |
名稱 | 說明 | 參數(shù) |
---|---|---|
default | 自定義文本 | - |
icon | 自定義圖標(biāo) | { checked: boolean, disabled: boolean } |
通過 ref 可以獲取到 CheckboxGroup 實(shí)例并調(diào)用實(shí)例方法,詳見組件實(shí)例方法。
方法名 | 說明 | 參數(shù) | 返回值 |
---|---|---|---|
toggleAll | 切換所有復(fù)選框,傳 true 為選中,false 為取消選中,不傳參為取反 |
options?: boolean | object | - |
import { ref } from 'vue';
import type { CheckboxGroupInstance } from 'vant';
const checkboxGroupRef = ref<CheckboxGroupInstance>();
// 全部反選
checkboxGroupRef?.value.toggleAll();
// 全部選中
checkboxGroupRef?.value.toggleAll(true);
// 全部取消
checkboxGroupRef?.value.toggleAll(false);
// 全部反選,并跳過禁用的復(fù)選框
checkboxGroupRef?.value.toggleAll({
skipDisabled: true,
});
// 全部選中,并跳過禁用的復(fù)選框
checkboxGroupRef?.value.toggleAll({
checked: true,
skipDisabled: true,
});
通過 ref 可以獲取到 Checkbox 實(shí)例并調(diào)用實(shí)例方法,詳見組件實(shí)例方法。
方法名 | 說明 | 參數(shù) | 返回值 |
---|---|---|---|
toggle | 切換選中狀態(tài),傳 true 為選中,false 為取消選中,不傳參為取反 |
checked?: boolean | - |
組件導(dǎo)出以下類型定義:
import type {
CheckboxProps,
CheckboxShape,
CheckboxInstance,
CheckboxLabelPosition,
CheckboxGroupProps,
CheckboxGroupInstance,
CheckboxGroupDirection,
CheckboxGroupToggleAllOptions,
} from 'vant';
?CheckboxInstance
? 和 ?CheckboxGroupInstance
? 是組件實(shí)例的類型,用法如下:
import { ref } from 'vue';
import type { CheckboxInstance, CheckboxGroupInstance } from 'vant';
const checkboxRef = ref<CheckboxInstance>();
const checkboxGroupRef = ref<CheckboxGroupInstance>();
checkboxRef.value?.toggle();
checkboxGroupRef.value?.toggleAll();
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--van-checkbox-size | 20px | - |
--van-checkbox-border-color | var(--van-gray-5) | - |
--van-checkbox-duration | var(--van-duration-fast) | - |
--van-checkbox-label-margin | var(--van-padding-xs) | - |
--van-checkbox-label-color | var(--van-text-color) | - |
--van-checkbox-checked-icon-color | var(--van-primary-color) | - |
--van-checkbox-disabled-icon-color | var(--van-gray-5) | - |
--van-checkbox-disabled-label-color | var(--van-text-color-3) | - |
--van-checkbox-disabled-background | var(--van-border-color) | - |
更多建議: