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>
  

• 处理点击事件

  如果你需要处理点击事件，你需要修改下样式：

  <cube-checkbox class="with-click" v-model="checked">
    Agree <a href="javascript:;" @click.stop>《xxx》</a>
  </cube-checkbox>
  

  .with-click
    .cube-checkbox-label
      a
        position: relative
        z-index: 1
  

Props 配置

• option 子配置项

事件