Wot UI1.14.0

简体中文

English

简体中文

English

Appearance

赞助位
成为赞助商

Checkbox 复选框 ​

用于在一组备选项中进行多选，支持普通样式、按钮样式、自定义图标及全选控制。

组件类型 ​

基本用法 ​

html
<wd-checkbox-group v-model="value">
  <wd-checkbox :name="1">多选 1</wd-checkbox>
  <wd-checkbox :name="2">多选 2</wd-checkbox>
  <wd-checkbox :name="3" type="square">多选 3</wd-checkbox>
  <wd-checkbox :name="4" type="dot">多选 4</wd-checkbox>
</wd-checkbox-group>

组件状态 ​

禁用状态 ​

html
<wd-checkbox-group v-model="value" disabled>
  <wd-checkbox :name="1">多选 1</wd-checkbox>
  <wd-checkbox :name="2">多选 2</wd-checkbox>
</wd-checkbox-group>

<wd-checkbox-group v-model="value">
  <wd-checkbox :name="1">多选 1</wd-checkbox>
  <wd-checkbox :name="2" disabled>多选 2</wd-checkbox>
</wd-checkbox-group>

半选状态 ​

html
<wd-checkbox v-model="checked" :indeterminate="indeterminate" @change="indeterminate = false">半选状态</wd-checkbox>

只读状态 ​

html
<wd-checkbox-group v-model="value" readonly>
  <wd-checkbox :name="1">多选 1</wd-checkbox>
  <wd-checkbox :name="2">多选 2</wd-checkbox>
</wd-checkbox-group>

组件变体 ​

勾选在右侧 ​

html
<wd-checkbox-group v-model="value" placement="right">
  <wd-checkbox :name="1">多选 1</wd-checkbox>
  <wd-checkbox :name="2">多选 2</wd-checkbox>
</wd-checkbox-group>

按钮样式 ​

html
<wd-checkbox-group v-model="value" type="button">
  <wd-checkbox :name="1">多选 1</wd-checkbox>
  <wd-checkbox :name="2">多选 2</wd-checkbox>
</wd-checkbox-group>

同行展示 ​

html
<wd-checkbox-group v-model="value" direction="horizontal">
  <wd-checkbox :name="1">多选 1</wd-checkbox>
  <wd-checkbox :name="2">多选 2</wd-checkbox>
</wd-checkbox-group>

最小与最大可选数量 ​

html
<wd-checkbox-group v-model="value" :min="1" :max="3">
  <wd-checkbox :name="1">多选 1</wd-checkbox>
  <wd-checkbox :name="2">多选 2</wd-checkbox>
  <wd-checkbox :name="3">多选 3</wd-checkbox>
  <wd-checkbox :name="4">多选 4</wd-checkbox>
</wd-checkbox-group>

组件样式 ​

修改选中颜色 ​

html
<wd-checkbox-group v-model="value" checked-color="#fa4350">
  <wd-checkbox :name="1">多选 1</wd-checkbox>
  <wd-checkbox :name="2">多选 2</wd-checkbox>
</wd-checkbox-group>

修改未选中颜色 ​

html
<wd-checkbox-group v-model="value" unchecked-color="#fa4350">
  <wd-checkbox :name="1">多选 1</wd-checkbox>
  <wd-checkbox :name="2">多选 2</wd-checkbox>
</wd-checkbox-group>

自定义图标 ​

html
<wd-checkbox-group v-model="value">
  <wd-checkbox :name="1">
    自定义图标
    <template #icon="{ isChecked }">
      <wd-icon :name="isChecked ? 'star-fill' : 'star'" size="22px" :color="isChecked ? '#fa4350' : '#ccc'" />
    </template>
  </wd-checkbox>
</wd-checkbox-group>

尺寸 ​

html
<wd-checkbox-group v-model="value" size="large">
  <wd-checkbox :name="1">多选 1</wd-checkbox>
  <wd-checkbox :name="2">多选 2</wd-checkbox>
</wd-checkbox-group>

特殊样式 ​

结合 Cell 使用 ​

html
<wd-checkbox-group v-model="value" direction="horizontal">
  <wd-cell-group border value-align="right">
    <wd-cell title="点赞" clickable @click="toggle(1)">
      <wd-checkbox :name="1" />
    </wd-cell>
    <wd-cell title="投币" clickable @click="toggle(2)">
      <wd-checkbox :name="2" />
    </wd-cell>
    <wd-cell title="一键三连" clickable @click="toggle(3)">
      <wd-checkbox :name="3" />
    </wd-cell>
  </wd-cell-group>
</wd-checkbox-group>

全选切换 ​

html
<wd-button @click="checkboxGroup?.toggleAll()">全部切换</wd-button>
<wd-button @click="checkboxGroup?.toggleAll(true)">全选</wd-button>
<wd-button @click="checkboxGroup?.toggleAll(false)">全不选</wd-button>
<wd-button @click="checkboxGroup?.toggleAll({ skipDisabled: true })">全部切换（跳过禁用）</wd-button>
<wd-button @click="checkboxGroup?.toggleAll({ checked: true, skipDisabled: true })">全选（跳过禁用）</wd-button>

<wd-checkbox-group v-model="value" ref="checkboxGroup">
  <wd-checkbox :name="1">多选 1</wd-checkbox>
  <wd-checkbox :name="2">多选 2</wd-checkbox>
  <wd-checkbox :name="3" disabled>多选 3</wd-checkbox>
  <wd-checkbox :name="4">多选 4</wd-checkbox>
</wd-checkbox-group>

Checkbox Attributes ​

参数说明类型默认值
v-model单独使用时的绑定值string | number | booleanfalse
name在 CheckboxGroup 中的唯一标识值string | number | boolean''
type形状类型，支持 circle / square / button / dotstring继承自 CheckboxGroup
checked-color选中颜色string继承自 CheckboxGroup
unchecked-color未选中颜色string继承自 CheckboxGroup
disabled是否禁用boolean | null继承自 CheckboxGroup
readonly是否只读boolean | null继承自 CheckboxGroup
indeterminate是否半选状态（样式优先级最高）booleanfalse
true-value单独使用时的选中值string | number | booleantrue
false-value单独使用时的非选中值string | number | booleanfalse
size尺寸，支持 largestring继承自 CheckboxGroup
placement勾选图标位置，支持 left / rightstring继承自 CheckboxGroup
direction布局方向，支持 horizontal / verticalstring继承自 CheckboxGroup
max-width文本最大宽度string-
custom-label-classlabel 文本自定义类名string-
custom-class根节点自定义类名string''
custom-style根节点自定义样式string''

CheckboxGroup Attributes ​

参数说明类型默认值
v-model绑定值数组Array<string | number | boolean>[]
type形状类型，支持 circle / square / button / dotstringcircle
checked-color选中颜色string-
unchecked-color未选中颜色string-
disabled是否禁用全部选项booleanfalse
readonly是否只读全部选项booleanfalse
min最小可选数量number0
max最大可选数量，0 表示不限制number0
size尺寸，支持 largestring-
placement勾选图标位置，支持 left / rightstringleft
direction布局方向，支持 horizontal / verticalstringvertical
custom-class根节点自定义类名string''
custom-style根节点自定义样式string''

Checkbox Events ​

事件名称说明参数
change单独使用时，绑定值变化后触发{ value }

CheckboxGroup Events ​

事件名称说明参数
change组选中值变化后触发{ value }

Checkbox Methods ​

方法名称说明参数
toggle切换当前选中状态-

CheckboxGroup Methods ​

方法名称说明参数
toggleAll批量切换全部选项状态boolean | { checked?: boolean; skipDisabled?: boolean }

Checkbox Slots ​

name说明参数
default自定义文本内容-
icon自定义图标{ isChecked }

CheckboxGroup Slots ​

name说明参数
default复选框列表内容-

主题定制 ​

CSS 变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称默认值描述
--wot-checkbox-label-margin$spacing-tight-
--wot-checkbox-color-checked$primary-6文字与图标距离
--wot-checkbox-icon-size$n-22选中颜色
--wot-checkbox-unchecked-color$coolgrey-3图标尺寸
--wot-checkbox-label-font-size$typography-body-size-main未选中图标颜色
--wot-checkbox-label-color$text-main文字字号
--wot-checkbox-label-line-height$typography-body-line--height-size-main文字颜色
--wot-checkbox-opacity-disabled$opacity-disabled文字行高
--wot-checkbox-horizontal-margin$spacing-zero $spacing-extra-loose $spacing-zero $spacing-zero禁用态透明度
--wot-checkbox-button-margin$spacing-zero $spacing-extra-loose $spacing-extra-loose $spacing-zero水平模式多个单选框距离
--wot-checkbox-button-border-width$stroke-main按钮模式多个单选框距离
--wot-checkbox-button-shape-border-radius$radius-radius-full边框宽度
--wot-checkbox-button-shape-size$n-26按钮模式图标圆角大小
--wot-checkbox-button-font-size$typography-body-size-main按钮模式图标容器大小
--wot-checkbox-button-line-height$typography-body-line--height-size-main按钮模式字号
--wot-checkbox-button-bg$filled-bottom按钮模式行高
--wot-checkbox-button-bg-checked$filled-oppo按钮模式背景颜色
--wot-checkbox-icon-size$n-10按钮模式选中状态背景颜色
--wot-checkbox-button-min-widthcalc(74 * #{$n-1})按钮模式图标尺寸
--wot-checkbox-button-max-widthcalc(148 * #{$n-1})按钮模式最小宽
--wot-checkbox-button-border-radius$radius-main按钮模式最大宽
--wot-checkbox-button-padding$padding-extra-tight $padding-extra-loose按钮圆角大小
--wot-checkbox-button-icon-color$icon-white按钮模式内边距
--wot-checkbox-button-shape-topcalc(-1 * #{$n-11})按钮模式图标颜色
--wot-checkbox-button-shape-leftcalc(-1 * #{$n-9})按钮模式勾角顶部偏移
--wot-checkbox-button-shape-rightcalc(-1 * #{$n-9})按钮模式勾角左侧偏移
--wot-checkbox-button-icon-topcalc(13 * #{$n-1})按钮模式勾角右侧偏移
--wot-checkbox-button-icon-right$n-4按钮模式图标顶部偏移
--wot-checkbox-button-icon-left$n-4按钮模式图标右侧偏移

源代码 ​

文档
 • 组件

Released under the MIT License.

Copyright © 2023-present weisheng

Released under the MIT License.

Copyright © 2023-present weisheng