Checker

Checker 是更加灵活的选择组件，可以自定义需要的布局样式。

示例

• 默认

  <cube-checker
    v-model="checkerValue"
    :options="options" />
  

  export default {
    data() {
      return {
        checkerValue: [],
        options: [
          {
            value: 1,
            text: 'red'
          },
          {
            value: 2,
            text: 'yellow'
          },
          {
            value: 3,
            text: 'blue'
          },
          {
            value: 4,
            text: 'green'
          }
        ]
      }
    }
  }
  

  如果选中了，则 checkerValue 的值就为 value。

  设置 option，当选中某一项的时候，checkerValue 的值就是 'optionValue'，当未选中的时候，checkerValue 的值就是 ''。

• 单选

  <cube-checker
    v-model="checkerValue"
    :options="options"
    type="radio" />
  

  export default {
    data() {
      return {
        checkerValue: '',
        options: [
          {
            value: 0,
            text: 'AAAAA'
          },
          {
            value: 1,
            text: 'BBBBB'
          }
        ]
      }
    }
  }
  

  可通过设置 type ，若为 'radio' 则是单选，若为 'checkbox' 则是多选。

• 自定义结构

  可通过默认插槽插入 CubeCheckerItem 实现自定义每项的结构。

  <cube-checker
    v-model="checkerList"
    :options="options"
    type="radio">
    <cube-checker-item
      v-for="item in options"
      :key="item.value"
      :option="item">
      <span class="orange"><i class="cubeic-alert"></i>{{item.text}}</span>
    </cube-checker-item>
  </cube-checker>
  

  export default {
    data() {
      return {
        checkerList: [],
        options: [
          {
            value: 0,
            text: 'AAAAA'
          },
          {
            value: 1,
            text: 'BBBBB'
          }
        ]
      }
    }
  }
  

• 个数限制

  max 设置最多可选个数，多选时可用。

  min 设置最少可选个数，多选时可用。

  <cube-checker
    v-model="checkerList"
    :options="options"
    :min="1"
    :max="2"/>
  

  export default {
    data() {
      return {
        checkerList: [3],
        options: [
          {
            value: 1,
            text: 'red'
          },
          {
            value: 2,
            text: 'yellow'
          },
          {
            value: 3,
            text: 'blue'
          },
          {
            value: 4,
            text: 'green'
          }
        ]
      }
    }
  }
  

• 不可点击状态^1.12.19

  disabled 设置禁用状态。

  <cube-checker
    v-model="checkerList"
    :options="options"/>
  

  export default {
    data() {
      return {
        checkerList: [2],
        options: [
          {
            value: 1,
            text: 'first',
            disabled: true
          },
          {
            value: 2,
            text: 'second',
            disabled: true
          },
          {
            value: 3,
            text: 'third'
          }
        ]
      }
    }
  }
  

Props 配置

• options 子配置项

CubeCheckerItem Props 配置

• option 子配置项