Press UI

# Checkbox 复选框

在一组备选项中进行多选。

# 引入

import PressCheckbox from 'press-ui/press-checkbox/press-checkbox';
import PressCheckboxGroup from 'press-ui/press-checkbox-group/press-checkbox-group';

export default {
  components: {
    PressCheckbox,
    PressCheckboxGroup,
  }
}

# 代码演示

# 基础用法

通过value绑定复选框的勾选状态。

<press-checkbox
  :value="checked"
  @change="onChange"
>
  复选框
</press-checkbox>

export default {
  data() {
    return {
      checked: true,
    };
  },
  methods: {
    onChange(val) {
      this.checked = val;
    },
  },
};

# 禁用状态

通过设置disabled属性可以禁用复选框。

<press-checkbox
  :value="checked"
  disabled
  @change="onChange"
>
  复选框
</press-checkbox>

# 自定义形状

将shape属性设置为square，复选框的形状会变成方形。

<press-checkbox
  shape="square"
  :value="checked"
  @change="onChange"
>
  复选框
</press-checkbox>

# 自定义颜色

通过checked-color属性可以自定义选中状态下的图标颜色。

 <press-checkbox
  :value="checked"
  checked-color="#07c160"
  @change="onChange"
>
  复选框
</press-checkbox>

# 自定义大小

通过icon-size属性可以自定义图标的大小。

<press-checkbox
  :value="checked"
  :icon-size="25"
  @change="onChange"
>
  复选框
</press-checkbox>

# 禁用文本点击

通过设置label-disabled属性可以禁用复选框文本点击。

 <press-checkbox
  :value="checked"
  label-disabled
  @change="onChange"
>
  复选框
</press-checkbox>

# API

# Checkbox Props

参数 说明 类型 默认值
name 标识 Checkbox 名称 string -
shape 形状，可选值为 round square string round
value 是否为选中状态 boolean false
disabled 是否禁用单选框 boolean false
label-disabled 是否禁用单选框内容点击 boolean false
label-position 文本位置，可选值为 left string right
use-icon-slot 是否使用 icon slot boolean false
checked-color 选中状态颜色 string #1989fa
icon-size icon 大小 string | number 20px
custom-class 根节点样式类 string -
icon-class 图标样式类 string -
label-class 描述信息样式类 string -

# CheckboxGroup Props

参数 说明 类型 默认值
name 在表单内提交时的标识符 string -
value 所有选中项的 name Array -
disabled 是否禁用所有单选框 boolean false
max 设置最大可选数 number 0（无限制）
direction 排列方向，可选值为 horizontal string vertical

# Checkbox Event

事件名 说明 回调参数
change 当绑定值变化时触发的事件 当前组件的值
input 当绑定值变化时触发的事件 当前组件的值

# CheckboxGroup Event

事件名 说明 回调参数
change 当绑定值变化时触发的事件 当前组件的值

# Checkbox Slot

名称 说明
- 自定义文本
icon 自定义图标

# Checkbox 方法

通过 selectComponent 可以获取到 checkbox 实例并调用实例方法。

方法名 参数 返回值 介绍
toggle - - 切换选中状态

# 在线调试

横屏

← CodeInput →