Checkbox 复选框

复选框，可设置其状态、传入特殊 class 以及复选框图标位置。

示例

基本用法

<cube-checkbox v-model="checked">
  Checkbox
</cube-checkbox>

如果选中了，则 checked 的值就为 true。

复选框图标样式

<cube-checkbox v-model="checked" position="right" shape="square" :hollow-style="true">
  Styled Checkbox
</cube-checkbox>

设置 position 为 ‘right’ 则复选框图标位置在右边，且可以通过 shape 配置图标形状以及设置 hollow-style 为 true 代表显示的是镂空样式的（即使 shape 不是 square 表现的也是方形的）。

改变 model 的值

<cube-checkbox v-model="checked" :option="option">

export default {
  data() {
    return {
      checked: false,
      option: {
        label: 'Option Checkbox',
        value: 'optionValue',
        disabled: false
      }
    }
  }
}

设置 option，当复选框选中的时候，checked 的值就是 'optionValue'，当未选中的时候，checked 的值就是 false；所以其实在单个复选框的场景下，最好不要设置 option。

禁用状态

<cube-checkbox v-model="checked" :option="{disabled: true}">
  Disabled Checkbox
</cube-checkbox>

Props 配置

• option 子配置项

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/checkbox