HIPS-UNI-UI

# Checkbox 复选框

# 使用指南

import Checkbox from '@hips/uni-ui/lib/checkbox';
import CheckboxGroup from '@hips/uni-ui/lib/checkbox-group';

export default {
  components: {
    'hips-checkbox': Checkbox,
    'hips-checkbox-group': CheckboxGroup,
  },
};
1
2
3
4
5
6
7
8
9

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-checkbox v-model="checkbox" label="标签1" />
1
export default {
  data() {
    return {
      checkbox: false,
    };
  },
};
1
2
3
4
5
6
7

# 选项形状

<hips-checkbox v-model="checkbox1" label="标签1" sharp="round" />
<hips-checkbox v-model="checkbox2" label="标签2" sharp="squire" />
1
2

# 禁用

<hips-checkbox v-model="checkbox" label="标签1" disabled />
1

# 选项在右侧

<hips-checkbox v-model="checkbox" label="标签" icon-position="right" />
1

# 多选

<hips-checkbox-group v-model="checkboxGroup" @change="handleGroupChange">
  <hips-checkbox label="分组中1" detail="detail1" />
  <hips-checkbox label="分组中2" detail="detail2" />
  <hips-checkbox label="分组中3" detail="detail3" />
</hips-checkbox-group>
1
2
3
4
5
export default {
  data() {
    return {
      checkboxGroup: [
        {
          label: '分组中1',
          detail: 'detail1',
        },
      ],
    };
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

# 最大选择数量

<hips-checkbox-group
  v-model="checkboxGroup1"
  :max="2"
  @change="handleGroupChange"
>
  <hips-checkbox label="分组中1" detail="detail1" />
  <hips-checkbox label="分组中2" detail="detail2" />
  <hips-checkbox label="分组中3" detail="detail3" />
</hips-checkbox-group>
1
2
3
4
5
6
7
8
9

# APIs

# Checkbox

参数 说明 类型 可选值 默认值
value v-model 绑定 Boolean - false
label 标签 String - -
detail 值(由于 value 已占用，使用 detail 代替) String - -
disabled 是否禁用 Boolean - false
icon-position 选项位置 String ['left','right'] left
sharp 选项形状 String ['squire','round'] round
active-color 选中后选项图标颜色 String - #1F8CEB
icon-size 选项图标大小 Number - 48
border 是否显示边框 Boolean - true

# CheckboxGroup

参数 说明 类型 可选值 默认值
value v-model 绑定 Array - []
max 最大选择数量 Number - -
disabled 是否禁用 Boolean - false

注意

value 绑定是一个数组，格式为

[
  {
    label: '',
    detail: '',
  },
];
1
2
3
4
5
6

每个对象必须包含 label 和 detail 其中一个 key 值

# Slots

# Checkbox

名称 说明
icon 选项图标
label 选项标签

# Events

# Checkbox

名称 说明 参数
change 选中和取消触发 current

注意

current 类似格式

{
    checked: '',    // 是否选中
    label: '',      // props label
    disabled: false,   // props disabled
    detail: '',     // props detail
    __elmId: '',    // 组件内为每个选项框设定的一个id
}
1
2
3
4
5
6
7

# CheckboxGroup

名称 说明 参数
change 选中和取消触发 当前所有子选项组件数据合集 current

注意

current 类似格式

[
  {
    checked: '', // 是否选中
    label: '', // props label
    disabled: false, // props disabled
    detail: '', // props detail
    __elmId: '', // 组件内为每个选项框设定的一个id
  },
];
1
2
3
4
5
6
7
8
9

# 样式变量

变量名 说明 默认值
checkbox-height 高度 100rpx
checkbox-label-font-size 标题文字大小 32rpx
checkbox-label-color 标题文字颜色 #4d4d4d
checkbox-disabled-label-color 禁用状态下标题文字颜色 #c9c9c9
checkbox-bg-color 背景颜色 white
checkbox-border-color 边框颜色 #eeeeee

注意

Rate 评分