W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
import Vue from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
通過v-model綁定復(fù)選框的勾選狀態(tài)
<van-checkbox v-model="checked">復(fù)選框</van-checkbox>
export default {
data() {
return {
checked: true
};
}
};
通過設(shè)置disabled屬性可以禁用復(fù)選框
<van-checkbox v-model="checked" disabled>復(fù)選框</van-checkbox>
設(shè)置icon-disabled屬性后,點擊復(fù)選框圖標以外的內(nèi)容不會觸發(fā)切換
<van-checkbox v-model="checked" icon-disabled>復(fù)選框</van-checkbox>
將shape屬性設(shè)置為square,復(fù)選框的形狀會變成方形
<van-checkbox v-model="checked" shape="square">復(fù)選框</van-checkbox>
通過checked-color屬性可以自定義選中狀態(tài)下的圖標顏色
<van-checkbox v-model="checked" checked-color="#07c160">復(fù)選框</van-checkbox>
通過icon-size屬性可以自定義圖標的大小
<van-checkbox v-model="checked" icon-size="24px">復(fù)選框</van-checkbox>
通過 icon 插槽自定義圖標,可以通過slotProps判斷是否為選中狀態(tài)
<van-checkbox v-model="checked">
自定義圖標
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
</van-checkbox>
export default {
data() {
checked: true,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
}
復(fù)選框可以與復(fù)選框組一起使用,選中值是一個數(shù)組,通過v-model綁定在CheckboxGroup上,數(shù)組中的值為選中的復(fù)選框的name
<van-checkbox-group v-model="result">
<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>
export default {
data() {
return {
result: ['a', 'b']
};
}
};
通過max屬性可以限制最大可選數(shù)
<van-checkbox-group v-model="result" :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實例上的toggleAll方法可以實現(xiàn)全選與反選
<van-checkbox-group v-model="result" 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="info" @click="toggleAll">反選</van-button>
export default {
data() {
return {
result: []
}
},
methods: {
checkAll() {
this.$refs.checkboxGroup.toggleAll(true);
},
toggleAll() {
this.$refs.checkboxGroup.toggleAll();
}
}
}
此時你需要再引入Cell和CellGroup組件,并通過Checkbox實例上的 toggle 方法觸發(fā)切換
<van-checkbox-group v-model="result">
<van-cell-group>
<van-cell
v-for="(item, index) in list"
clickable
:key="item"
:title="`復(fù)選框 ${item}`"
@click="toggle(index)"
>
<van-checkbox
:name="item"
ref="checkboxes"
slot="right-icon"
/>
</van-cell>
</van-cell-group>
</van-checkbox-group>
export default {
methods: {
toggle(index) {
this.$refs.checkboxes[index].toggle();
}
}
}
參數(shù) | 說明 | 類型 | 默認值 |
---|---|---|---|
name | 標識符 | any | - |
shape | 形狀,可選值為 square | string | round |
v-model | 是否為選中狀態(tài) | boolean | false |
disabled | 是否禁用復(fù)選框 | boolean | false |
label-disabled | 是否禁用復(fù)選框文本點擊 | boolean | false |
label-position | 文本位置,可選值為 left | string | right |
icon-size | 圖標大小,默認單位為px | number | string | 20px |
checked-color | 選中狀態(tài)顏色 | string | #1989fa |
bind-group v2.2.4 | 是否與復(fù)選框組綁定 | boolean | true |
參數(shù) | 說明 | 類型 | 默認值 |
---|---|---|---|
v-model | 所有選中項的標識符 | any[] | - |
disabled | 是否禁用所有復(fù)選框 | boolean | false |
max | 最大可選數(shù),0 為無限制 | number | string | 0 |
icon-size v2.2.3 | 所有復(fù)選框的圖標大小,默認單位為px | number | string | 20px |
checked-color v2.2.3 | 所有復(fù)選框的選中狀態(tài)顏色 | string | #1989fa |
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
change | 當綁定值變化時觸發(fā)的事件 | 當前組件的值 |
click | 點擊復(fù)選框時觸發(fā) | event: Event |
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
change | 當綁定值變化時觸發(fā)的事件 | 當前組件的值 |
名稱 | 說明 | SlotProps |
---|---|---|
default | 自定義文本 | - |
icon | 自定義圖標 | checked: 是否為選中狀態(tài) |
通過 ref 可以獲取到 CheckboxGroup 實例并調(diào)用實例方法,詳見 組件實例方法
方法名 | 說明 | 參數(shù) | 返回值 |
---|---|---|---|
toggleAll | 切換所有復(fù)選框,傳true 為選中,false 為取消選中,不傳參為取反 | checked?: boolean | - |
通過 ref 可以獲取到 Checkbox 實例并調(diào)用實例方法,詳見 組件實例方法
方法名 | 說明 | 參數(shù) | 返回值 |
---|---|---|---|
toggle | 切換選中狀態(tài),傳true 為選中,false 為取消選中,不傳參為取反 | checked?: boolean | - |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: