Skip to content
On this page

Checkbox 复选框

基本用法

value 为绑定值,通过 v-model 绑定复选框的勾选状态,单独使用时值为 boolean 类型。

html
<wd-checkbox v-model="value" @change="handleChange">单选框1</wd-checkbox>
typescript
const value = ref<boolean>(true)

function handleChange1({value}) {
  console.log(value)
}

修改图标形状

修改 shape 属性,可选值为 'circle'、'square'、'button',默认为 'circle'。

html
<wd-checkbox :modelValue="true" shape="square">沃特</wd-checkbox>
<wd-checkbox :modelValue="true" shape="button">沃特</wd-checkbox>

修改选中的颜色

设置 checked-color 属性。

html
<wd-checkbox
   v-model="value"
   checked-color="#f00"
>
  沃特
</wd-checkbox>
typescript
const value = ref<boolean>(true)

修改选中和非选中的值

设置 true-valuefalse-value 修改选中值和非选中值。如果不设置,change事件的参数 默认为 truefalse 切换。

html
<wd-checkbox
  :modelValue="true"
  true-value="沃特"
  false-value="商家后台"
>
  复选框
</wd-checkbox>

复选框组

通过 v-model 绑定复选框的勾选状态。

html
<wd-checkbox-group v-model="value">
  <wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
  <wd-checkbox modelValue="shop">商家后台</wd-checkbox>
</wd-checkbox-group>
typescript
const value = ref<number[]>([])

设置 cell 属性,开启表单模式复选框组。

html
<wd-checkbox-group v-model="value1" cell>
  <wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
  <wd-checkbox modelValue="shop">商家后台</wd-checkbox>
</wd-checkbox-group>

开启表单模式时,如果同时设置 shapebutton 自动开启表单复选按钮组模式。

html
<wd-checkbox-group v-model="value2" cell shape="button">
  <wd-checkbox modelValue="1" disabled>选项一</wd-checkbox>
  <wd-checkbox modelValue="2">选项二</wd-checkbox>
  <wd-checkbox modelValue="3">选项三</wd-checkbox>
  <wd-checkbox modelValue="4">选项四</wd-checkbox>
  <wd-checkbox modelValue="5">选项五</wd-checkbox>
  <wd-checkbox modelValue="6">选项六</wd-checkbox>
  <wd-checkbox modelValue="7">选项七</wd-checkbox>
</wd-checkbox-group>
typescript
const value = ref(['jingmai'])
const value1 = ref(['jingmai'])
const value2 = ref(['1'])

同行展示

设置 inline 属性,使复选框在同一行展示。

html
<wd-checkbox-group v-model="value" inline>
  <wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
  <wd-checkbox modelValue="shop">商家后台</wd-checkbox>
</wd-checkbox-group>
typescript
const value = ref(['jingmai'])

禁用

可以在 checkbox-group 上面设置 disabled,禁用所有复选框,也可以在单个复选框上面设置 disabled 属性,禁用某个复选框。

html
<wd-checkbox-group v-model="value" disabled>
  <wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
  <wd-checkbox modelValue="shop">商家后台</wd-checkbox>
</wd-checkbox-group>
typescript
const value = ref(['jingmai'])

设置选中数量的上限和下限

min 属性设置最小选中的数量,max 属性设置最大选中的数量。如果要默认设置某个选项固定被选中,则给该复选框设置 disabled,且 value 中有该选项的值。

html
<wd-checkbox-group v-model="value" :min="1" :max="3">
  <wd-checkbox modelValue="jd">京东</wd-checkbox>
  <wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
  <wd-checkbox modelValue="shop">商家后台</wd-checkbox>
  <wd-checkbox modelValue="market">营销中心</wd-checkbox>
</wd-checkbox-group>
typescript
const value = ref(['jd'])

尺寸

设置 size 属性,可选 large

html
<wd-checkbox-group v-model="value" size="large">
  <wd-checkbox modelValue="1">沃特</wd-checkbox>
  <wd-checkbox modelValue="2">商家后台</wd-checkbox>
</wd-checkbox-group>

Checkbox Attributes

参数说明类型可选值默认值最低版本
v-model单选框选中时的值string / number / boolean---
shape单选框形状stringcircle / square / buttoncircle-
checked-color选中的颜色string-#4D80F0-
disabled禁用boolean-false-
max-width文字位置最大宽度string---
true-value选中值,在 checkbox-group 中使用无效,需同 false-value 一块使用string / number-true-
false-value非选中时的值,在 checkbox-group 中使用无效,需同 true-value 一块使用string /number-false-
size设置大小stringlarge--
nameform 表单中的字段名string---

CheckboxGroup Attributes

参数说明类型可选值默认值最低版本
v-model绑定值Array---
shape单选框形状stringcircle / square / buttoncircle-
cell表单模式boolean-false-
checked-color选中的颜色string-#4D80F0-
disabled禁用boolean-false-
min最小选中的数量number-0-
max最大选中的数量,0 为无限数量,默认为 0number-0-
inline同行展示boolean-false-
size设置大小stringlarge--
nameform 表单中的字段名string---

Checkbox Methods

方法名称说明参数最低版本
toggle切换当前选中状态,同时触发change事件--

Checkbox Events

事件名称说明参数最低版本
change绑定值变化时触发,当为复选框组时参数为boolean,表示该复选框是否选中{ value }-

CheckboxGroup Events

事件名称说明参数最低版本
change绑定值变化时触发{ value }-

Checkbox 外部样式类

类名说明最低版本
custom-class根节点样式-
custom-label-class文字结点样式-
custom-shape-class单选图标结点样式-

CheckboxGroup 外部样式类

类名说明最低版本
custom-class根节点样式-

Released under the MIT License.

Released under the MIT License.