Checkbox 多选框


基本多选框

独立使用时,需要单独绑定 model

Checkbox多选框 - 图1

  1. <at-checkbox v-model="checkboxValue1" label="深圳">深圳</at-checkbox>
  2. <p class="demo-desc">{{ checkboxValue1 }}</p>

不可用的多选框

添加 disabled 属性禁用多选框

Checkbox多选框 - 图2

  1. <at-checkbox v-model="checkboxValue2" label="深圳" disabled>深圳</at-checkbox>
  2. <at-checkbox v-model="checkboxValue3" label="凹凸实验室" disabled checked>凹凸实验室</at-checkbox>

多选框组

适用于多个多选框绑定同一个 model 的情景

Checkbox多选框 - 图3

  1. <at-checkbox-group v-model="checkboxValue4">
  2. <at-checkbox label="深圳">深圳</at-checkbox>
  3. <at-checkbox label="北京">北京</at-checkbox>
  4. <at-checkbox label="上海">上海</at-checkbox>
  5. <at-checkbox label="广州" disabled>广州</at-checkbox>
  6. <at-checkbox label="凹凸实验室" disabled>凹凸实验室</at-checkbox>
  7. </at-checkbox-group>
  8. <p class="demo-desc">{{ checkboxValue4 }}</p>

Checkbox 参数

参数说明类型可选值默认值
label选中状态的值String--
disabled是否禁用按钮Boolean-false
checked是否已勾选Boolean-false

Checkbox 事件

事件名称说明返回值
on-change绑定的值变化时触发选中的按钮的 label 值

Checkbox Group 事件

事件名称说明返回值
on-change绑定的值变化时触发选中的按钮的 label 值