iDesign

Checkbox 多选框

多选框是一个选择控件，允许用户通过单击在选中和未选中之间切换。

基本用法

最简单的多选框形式。

<template>
  <div className="idesign-demo-block-column">
    <i-checkbox>无默认值</i-checkbox>
    <i-checkbox :defaultChecked="checked">有默认值（非受控）</i-checkbox>
    <i-checkbox :modelValue="checked">有固定值（受控）</i-checkbox>
    <i-checkbox :modelValue="checked" @change="handleChange">
      通用方法
    </i-checkbox>
    <i-checkbox v-model="checked">v-model 用法</i-checkbox>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const checked = ref(true)

const handleChange = (val, e) => {
  console.log(val, e)
  checked.value = val
}
</script>
显示代码

多选框组

使用 i-checkbox-group 可以包裹 i-checkbox 形成一组多选框组。

无默认值

有默认值（非受控）

有固定值（受控）

通用方法

v-model 用法

<template>
  <h4>无默认值</h4>
  <i-checkbox-group>
    <i-checkbox value="bj">北京</i-checkbox>
    <i-checkbox value="sh">上海</i-checkbox>
    <i-checkbox value="gz">广州</i-checkbox>
    <i-checkbox value="sz">深圳</i-checkbox>
  </i-checkbox-group>
  <h4>有默认值（非受控）</h4>
  <i-checkbox-group :defaultChecked="currentValue">
    <i-checkbox value="bj">北京</i-checkbox>
    <i-checkbox value="sh">上海</i-checkbox>
    <i-checkbox value="gz">广州</i-checkbox>
    <i-checkbox value="sz">深圳</i-checkbox>
  </i-checkbox-group>
  <h4>有固定值（受控）</h4>
  <i-checkbox-group :modelValue="currentValue">
    <i-checkbox value="bj">北京</i-checkbox>
    <i-checkbox value="sh">上海</i-checkbox>
    <i-checkbox value="gz">广州</i-checkbox>
    <i-checkbox value="sz">深圳</i-checkbox>
  </i-checkbox-group>
  <h4>通用方法</h4>
  <i-checkbox-group :modelValue="currentValue" @change="handleChange">
    <i-checkbox value="bj">北京</i-checkbox>
    <i-checkbox value="sh">上海</i-checkbox>
    <i-checkbox value="gz">广州</i-checkbox>
    <i-checkbox value="sz">深圳</i-checkbox>
  </i-checkbox-group>
  <h4>v-model 用法</h4>
  <i-checkbox-group v-model="currentValue">
    <i-checkbox value="bj">北京</i-checkbox>
    <i-checkbox value="sh">上海</i-checkbox>
    <i-checkbox value="gz">广州</i-checkbox>
    <i-checkbox value="sz">深圳</i-checkbox>
  </i-checkbox-group>
</template>

<script setup>
import { ref } from 'vue'
const currentValue = ref(['gz'])

const handleChange = (val, e) => {
  console.log(val, e)
  currentValue.value = val
}
</script>
显示代码

不同尺寸

i-checkbox 多选框提供 size 属性控制尺寸，i-checkbox-group 也有 size 属性可以全局控制每一项多选框的尺寸。

<template>
  <div className="idesign-demo-block-column">
    <div className="idesign-demo-block-row">
      <i-checkbox size="small">small</i-checkbox>
      <i-checkbox size="medium">medium</i-checkbox>
      <i-checkbox size="large">large</i-checkbox>
    </div>

    <div className="idesign-demo-block-row">
      <i-checkbox-group
        size="small"
        v-model="currentValue"
      >
        <i-checkbox value="bj">北京</i-checkbox>
        <i-checkbox value="sh">上海</i-checkbox>
        <i-checkbox value="gz">广州</i-checkbox>
        <i-checkbox value="sz">深圳</i-checkbox>
      </i-checkbox-group>
    </div>

    <div className="idesign-demo-block-row">
      <i-checkbox-group
        size="medium"
        v-model="currentValue"
      >
        <i-checkbox value="bj">北京</i-checkbox>
        <i-checkbox value="sh">上海</i-checkbox>
        <i-checkbox value="gz">广州</i-checkbox>
        <i-checkbox value="sz">深圳</i-checkbox>
      </i-checkbox-group>
    </div>

    <div className="idesign-demo-block-row">
      <i-checkbox-group
        size="large"
        v-model="currentValue"
      >
        <i-checkbox value="bj">北京</i-checkbox>
        <i-checkbox value="sh">上海</i-checkbox>
        <i-checkbox value="gz">广州</i-checkbox>
        <i-checkbox value="sz">深圳</i-checkbox>
      </i-checkbox-group>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const currentValue = ref(['gz'])
</script>
显示代码

禁用状态

i-checkbox 提供 disabled 属性控制多选框为禁用状态，i-checkbox-group 可以全局控制每一项为禁用状态。

单项禁用

多选框组局部禁用

多选框组全局禁用

<template>
  <h4>单项禁用</h4>
  <div className="idesign-demo-block-row">
    <i-checkbox disabled>未选中</i-checkbox>
  </div>

  <h4>多选框组局部禁用</h4>
  <div className="idesign-demo-block-row">
    <i-checkbox-group v-model="currentValue">
      <i-checkbox value="bj">北京</i-checkbox>
      <i-checkbox value="sh">上海</i-checkbox>
      <i-checkbox value="gz">广州</i-checkbox>
      <i-checkbox value="sz" disabled> 深圳 </i-checkbox>
    </i-checkbox-group>
  </div>

  <h4>多选框组全局禁用</h4>
  <div className="idesign-demo-block-row">
    <i-checkbox-group disabled v-model="currentValue">
      <i-checkbox value="bj">北京</i-checkbox>
      <i-checkbox value="sh">上海</i-checkbox>
      <i-checkbox value="gz">广州</i-checkbox>
      <i-checkbox value="sz">深圳</i-checkbox>
    </i-checkbox-group>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const currentValue = ref(['gz'])
</script>
显示代码

Checkbox Attributes

属性说明类型默认值
size多选框尺寸"small"〡"medium"〡"large""medium"
value多选框唯一标识string〡number--
modelValue / v-model是否固定选中（受控）booleanfalse
defaultChecked是否默认选中（非受控）booleanfalse
disabled是否单项禁用booleanfalse

Checkbox Events

属性说明类型默认值
change值变化时触发(checked: boolean, e: Event) => void--

CheckboxGroup Attributes

属性说明类型默认值
modelValue / v-model多选框组选中固定值（受控）Array<string〡number>--
defaultChecked多选框组选中默认值（非受控）Array<string〡number>--
size多选框全局尺寸"small"〡"medium"〡"large""medium"
disabled多选框组是否全局禁用booleanfalse

CheckboxGroup Events

属性说明类型默认值
change选中某一项时触发(value: Array<string〡number>, e: Event) => void--
Last Updated:
Contributors: Leophen