Appearance

iuiDesign
100%
02:32
本页目录

用于预设的一组选项中执行多项选择，并呈现选择结果。

基本使用 ​

复选框的基本用法。一般不会单独使用，而是作为 checkbox-group 的子组件使用。

html
<iui-checkbox label="Option"></iui-checkbox>
<iui-checkbox label="Option"></iui-checkbox>

禁用状态 ​

禁用复选框。

html
<iui-checkbox label="Option" disabled></iui-checkbox>
<iui-checkbox label="Option" disabled></iui-checkbox>

复选框组 ​

复选框组，用于在多个备选项中进行多项选择。

html
<iui-checkbox-group @change="handleGroupChange">
  <iui-space size="medium" direction="vertical">
    <view v-for="item in 4" :key="item">
      <iui-checkbox :label="`Option ${item}`"></iui-checkbox>
    </view>
  </iui-space>
</iui-checkbox-group>

<script setup>
  import { computed, ref } from "vue";

  const handleGroupChange = (e) => {
    console.log(e); // ["Option 1", "Option 2"]
  };
</script>
<iui-checkbox-group @change="handleGroupChange">
  <iui-space size="medium" direction="vertical">
    <view v-for="item in 4" :key="item">
      <iui-checkbox :label="`Option ${item}`"></iui-checkbox>
    </view>
  </iui-space>
</iui-checkbox-group>

<script setup>
  import { computed, ref } from "vue";

  const handleGroupChange = (e) => {
    console.log(e); // ["Option 1", "Option 2"]
  };
</script>

在列表中使用 ​

在列表中使用时，推荐使用通栏模式，label 显示在左侧， 选择器显示在右侧。

html
<iui-checkbox-group>
  <iui-list>
    <iui-cell v-for="item in 4" :key="item">
      <iui-checkbox :label="`Option ${item}`"></iui-checkbox>
    </iui-cell>
  </iui-list>
</iui-checkbox-group>

<!-- 通栏 -->
<iui-checkbox-group justify>
  <iui-list>
    <iui-cell v-for="item in 4" :key="item">
      <iui-checkbox :label="`Option ${item}`"></iui-checkbox>
    </iui-cell>
  </iui-list>
</iui-checkbox-group>
<iui-checkbox-group>
  <iui-list>
    <iui-cell v-for="item in 4" :key="item">
      <iui-checkbox :label="`Option ${item}`"></iui-checkbox>
    </iui-cell>
  </iui-list>
</iui-checkbox-group>

<!-- 通栏 -->
<iui-checkbox-group justify>
  <iui-list>
    <iui-cell v-for="item in 4" :key="item">
      <iui-checkbox :label="`Option ${item}`"></iui-checkbox>
    </iui-cell>
  </iui-list>
</iui-checkbox-group>

API ​

<Checkbox>props
参数描述类型默认值
modelValue (v-model)是否选中Booleanfalse
disabled是否禁用Booleanfalse
label标签String -
value选中时的值String | Number | Boolean-
color选择器颜色String-
checked默认选中Booleanfalse
justify通栏Booleanfalse
<Checkbox>events
事件名描述参数
change选中状态切换时触发
<CheckboxGroup>props
参数描述类型默认值
modelValue (v-model)选中的值Array[]
justify通栏Booleanfalse
<CheckboxGroup>events
事件名描述参数
change选中列表变化时触发modelValue: Array
<CheckboxGroup>methods
方法名描述参数
checkAll全选-
reverseChecked反选-