APIbeta

Checkbox

Introduce

props

名称 描述 类型 可选值 默认值
value / v-model 绑定值; 等同于checked boolean — —
checked 当前是否勾选 boolean — false
disabled 是否禁用 boolean或’disabled’ — false

events

名称 描述 回调参数
change(checked):void 选中状态改变事件 更新后的值

example

示例代码.

1
2
3
<bp-checkbox v-model="checked">chk1</bp-checkbox>
<bp-checkbox checked="checked" >chk2</bp-checkbox>
<bp-checkbox disabled="disabled" >chk3</bp-checkbox>

See the Pen bpui-checkbox by brainpoint (@brainpoint) on CodePen.

checkboxGroup

可使用 bpCheckboxGroup 组件将多个checkbox组合起来

1
2
3
4
5
<bp-checkbox-group v-model="groupValue" :disabled="groupDisable">
  <bp-checkbox>check1</bp-checkbox>
  <bp-checkbox>check2</bp-checkbox>
  <bp-checkbox>check3</bp-checkbox>
</bp-checkbox-group>

其中, groupValue是一个数组:

1
2
3
4
5
// type of groupValue
Array<{
  isChecked: boolean,
  label: string,
}>

自定义主题

图标

组件中使用到的图标有:

图标名称 描述
bp-checkbox_checked 选中状态的打钩图标

可以使用bpui.icons.registerSvgIcon('name', <svg file>)方式, 进行组件图标自定义

样式结构

组件的样式结构如下:

1
2
3
4
5
6
7
8
.bp-checkbox {
  /* checkbox input部分 */
  .bp-checkbox__input {
  }
  /* label部分 */
  .bp-checkbox__label {
  }
}

scss样式文件存放在@bpui/checkbox/style 目录下, 可以复制修改以定制主题