Vant Checkbox 复选框
Vant Check@R_134_2@ 复选框主要一些常规复选框的使用。
import Vue from 'vue'; import { Check@R_134_2@, Check@R_134_2@Group } from 'vant'; Vue.use(Check@R_134_2@); Vue.use(Check@R_134_2@Group);
通过v-model绑定复选框的勾选状态
<van-check@R_134_2@ v-model="checked">复选框</van-check@R_134_2@>
export default { data() { return { checked: true }; } };
通过设置disabled可以禁用复选框
<van-check@R_134_2@ v-model="checked" disabled>复选框</van-check@R_134_2@>
设置label-disabled后,点击复选框图标以外的不会触发切换
<van-check@R_134_2@ v-model="checked" icon-disabled>复选框</van-check@R_134_2@>
将shape设置为square,复选框的形状会变成方形
<van-check@R_134_2@ v-model="checked" shape="square">复选框</van-check@R_134_2@>
通过checked-color可以选中状态下的图标颜色
<van-check@R_134_2@ v-model="checked" checked-color="#07c160">复选框</van-check@R_134_2@>
通过icon-size可以图标的大小
<van-check@R_134_2@ v-model="checked" icon-size="24px">复选框</van-check@R_134_2@>
通过 icon 插槽图标,可以通过slotProps判断是否为选中状态
<van-check@R_134_2@ v-model="checked"> 图标 <img slot="icon" slot-scope="props" :src="props.checked ? activeIcon : inactiveIcon" > </van-check@R_134_2@>
export default { data() { checked: true, activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png' } }
复选框可以与复选框组一起使用,选中值是数组,通过v-model绑定在Check@R_134_2@Group上,数组中的值为选中的复选框的name
<van-check@R_134_2@-group v-model="result"> <van-check@R_134_2@ name="a">复选框 a</van-check@R_134_2@> <van-check@R_134_2@ name="b">复选框 b</van-check@R_134_2@> <van-check@R_134_2@ name="c">复选框 c</van-check@R_134_2@> </van-check@R_134_2@-group>
export default { data() { return { result: ['a', 'b'] }; } };
通过max可以限制最大可选数
<van-check@R_134_2@-group v-model="result" :max="2"> <van-check@R_134_2@ name="a">复选框 a</van-check@R_134_2@> <van-check@R_134_2@ name="b">复选框 b</van-check@R_134_2@> <van-check@R_134_2@ name="c">复选框 c</van-check@R_134_2@> </van-check@R_134_2@-group>
通过Check@R_134_2@Group实例上的toggleAll可以实现全选与反选
<van-check@R_134_2@-group v-model="result" ref="check@R_134_2@Group"> <van-check@R_134_2@ name="a">复选框 a</van-check@R_134_2@> <van-check@R_134_2@ name="b">复选框 b</van-check@R_134_2@> <van-check@R_134_2@ name="c">复选框 c</van-check@R_134_2@> </van-check@R_134_2@-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.check@R_134_2@Group.toggleAll(true); }, toggleAll() { this.$refs.check@R_134_2@Group.toggleAll(); } } }
此时你需要再引入Cell和CellGroup组件,并通过Check@R_134_2@实例上的 toggle 触发切换
<van-check@R_134_2@-group v-model="result"> <van-cell-group> <van-cell v-for="(item, index) in list" clickable :key="item" :title="`复选框 ${item}`" @click="toggle(index)" > <van-check@R_134_2@ :name="item" ref="check@R_134_2@es" slot="right-icon" /> </van-cell> </van-cell-group></van-check@R_134_2@-group>
export default { methods: { toggle(index) { this.$refs.check@R_134_2@es[index].toggle(); } } }
API
通过 ref 可以到 Check@R_134_2@Group 实例并实例,详见
通过 ref 可以到 Check@R_134_2@ 实例并实例,详见