# 多选框 CheckBox

一组备选项中进行多选

# 基础用法

多选框
基础用法

单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍。

<title>基础用法</title>
<describe>单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍。</describe>
<template>
    <hc-checkbox v-model="checked" label="1">多选框</hc-checkbox>
</template>
<script>
export default {
  data: function() {
    return {
      checked: '1'
    }
  }
}
</script>

# 只读模式

多选框
只读模式

多选框不可用状态。

<title>只读模式</title>
<describe>多选框不可用状态。</describe>
<template>
    <hc-checkbox v-model="checked" :mode="3" label="1">多选框</hc-checkbox>
</template>
<script>
export default {
  data: function() {
    return {
      checked: '1'
    }
  }
}
</script>

# 多选框组

多选框1 多选框2 多选框3
多选框组

适用于多个勾选框绑定到同一个数组的情景,通过是否勾选来表示这一组选项中选中的项。

<title>多选框组</title>
<describe>适用于多个勾选框绑定到同一个数组的情景,通过是否勾选来表示这一组选项中选中的项。</describe>
<template>
    <hc-checkbox-group v-model="checkGroup">
      <hc-checkbox label="1">多选框1</hc-checkbox>
      <hc-checkbox label="2">多选框2</hc-checkbox>
      <hc-checkbox label="3">多选框3</hc-checkbox>
    </hc-checkbox-group>
</template>
<script>
export default {
  data: function() {
    return {
      checkGroup: '1'
    }
  }
}
</script>

# 多选框组只读模式

多选框1 多选框2 多选框3
多选框组只读模式

多选框组不可用状态。

<title>多选框组只读模式</title>
<describe>多选框组不可用状态。</describe>
<template>
    <hc-checkbox-group v-model="checkGroup1" :mode="3">
      <hc-checkbox label="1">多选框1</hc-checkbox>
      <hc-checkbox label="2">多选框2</hc-checkbox>
      <hc-checkbox label="3">多选框3</hc-checkbox>
    </hc-checkbox-group>
</template>
<script>
export default {
  data: function() {
    return {
      checkGroup1: '1,2'
    }
  }
}
</script>

# 不确定状态

全选 多选框1 多选框2 多选框3
indeterminate 状态

indeterminate 属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果。

<title>indeterminate 状态</title>
<describe>indeterminate 属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果。</describe>
<template>
    <hc-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</hc-checkbox>
    <hc-checkbox-group v-model="checkGroup"  @change="handleCheckGroupChange">
      <hc-checkbox label="1">多选框1</hc-checkbox>
      <hc-checkbox label="2">多选框2</hc-checkbox>
      <hc-checkbox label="3">多选框3</hc-checkbox>
    </hc-checkbox-group>
</template>
<script>

export default {
  name: 'demo-checkbox-base',
  data: function () {
    return {
      checkAll: true,
      isIndeterminate: true,
      checkGroup: '1'
    }
  },
  methods: {
    handleCheckAllChange: function(event) {
      var CheckGroup = [1, 2, 3]
      this.checkGroup = event.value ? CheckGroup.join(',') : ''
      this.isIndeterminate = false
    },
    handleCheckGroupChange: function(value) {
      var CheckGroup = [1, 2, 3]
      var checkedCount = value.value === "" ? 0 : value.value.split(',').length
      var checkGroupString = CheckGroup.join(',')
      this.checkAll = checkGroupString === value.value
      this.isIndeterminate = checkedCount > 0 && checkedCount < CheckGroup.length
    }
  }
}
</script>

# 排列模式

多选框1 多选框2 多选框3
--------------------------------------------
多选框1 多选框2 多选框3
多选框组

多选框组横向或纵向排列。

<title>多选框组</title>
<describe>多选框组横向或纵向排列。</describe>
<template>
    <div>
      <div>
        <hc-checkbox-group v-model="checkGroup" direction="row">
          <hc-checkbox label="1">多选框1</hc-checkbox>
          <hc-checkbox label="2">多选框2</hc-checkbox>
          <hc-checkbox label="3">多选框3</hc-checkbox>
        </hc-checkbox-group>
      </div>
      <div>--------------------------------------------</div>
      <div>
        <hc-checkbox-group v-model="checkGroup" direction="column">
          <hc-checkbox label="1">多选框1</hc-checkbox>
          <hc-checkbox label="2">多选框2</hc-checkbox>
          <hc-checkbox label="3">多选框3</hc-checkbox>
        </hc-checkbox-group>
      </div>
    </div>
</template>
<script>
export default {
  data: function() {
    return {
      checkGroup: '1',
      directionRow: 'row',
      directionColumn: 'column'
    }
  }
}
</script>

# 插槽

多选框1 多选框2 多选框3
插槽

适用于在checkbox文本后还想添加自定义样式,可以通过具名 slot 来实现自定义的内容。

<title>插槽</title>
<describe>适用于在checkbox文本后还想添加自定义样式,可以通过具名 slot 来实现自定义的内容。</describe>
<template>
    <div>
      <hc-checkbox-group v-model="checkGroup" direction="column">
        <hc-checkbox label="1">
          <span>多选框1</span>
          <template v-slot:content>
              <div>这里是自定义的插槽内容1</div>
          </template>
        </hc-checkbox>
        <hc-checkbox label="2">
          <span>多选框2</span>
          <template v-slot:content>
              <div>这里是自定义的插槽内容2</div>
          </template>
        </hc-checkbox>
        <hc-checkbox label="3">
          <span>多选框3</span>
          <template v-slot:content>
              <div>这里是自定义的插槽内容3</div>
          </template>
        </hc-checkbox>
      </hc-checkbox-group>
    </div>
</template>
<script>
export default {
  data: function() {
    return {
      checkGroup: '1',
      directionRow: 'row',
      directionColumn: 'column'
    }
  }
}
</script>

# Checkbox 属性

属性 说明 类型 可选值 默认值
name 原生 name 属性 string -- --
value 当前值,支持v-model方式使用 string -- --
label 选中状态的值(只有在checkbox-group或者绑定对象类型为array时有效) string -- --
viewable 是否查看状态 boolean -- false
disabled 是否禁用 boolean -- false
indeterminate 设置 indeterminate 状态,只负责样式控制 boolean -- false

# Checkbox事件

事件 说明 回调参数
change 用户勾选时触发 {value: 值}

# CheckboxGroup属性

属性 说明 类型 可选值 默认值
value 当前值,支持v-model方式使用 string -- --
direction 排列模式,row为横向排列,column为纵向排列 string row,column row
viewable 是否查看状态 boolean -- false

# CheckboxGroup 事件

事件 说明 回调参数
change 用户选择值确认时触发 {value: 值}