Checkbox 复选框

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/checkbox

复选框配合复选框组一起使用, 表示在一个范围内进行复选.

单个复选框的基本用法:

<van-checkbox v-model="checked">复选框</van-checkbox>

const checked = ref(true)

组合使用

<van-checkbox-group v-model="checkeds">
  <van-checkbox name="a">A</van-checkbox>
  <van-checkbox name="b">B</van-checkbox>
</van-checkbox-group>

const checkeds = ref<string[]>([])

模型绑定的取值是, 复选框的 name 以数组的形式存储与 模型中.

常用属性:

• 禁用 disabled
• 自定义形状 shape 取值: square, round
• 自定义选中颜色: checked-color
• 自定义大小 icon-size
• 自定义图标, 使用 icon 插槽.
• 将文本置于选框左侧: label-position="left"
• 复选框水平排列: 在 ChekboxGroup 中使用 direction="horizontal" (默认是垂直排列).
• 限制最大可选数: 在 CheckboxGroup 使用 max 属性.
• 全选与反选. CheckboxGroup 实例的方法, toggleAll(), 无参数为反选, 传入参数 true 为全选.
• 搭配单元格使用. 使用单元格 right-icon 插槽放置复选框.
• 不确定状态, 利用 indeterminate 属性控制.