Checkbox 多选框

概述

基本组件-多选框。主要用于一组可选项多项选择,或者单独用于标记切换某种状态。

代码示例

Checkbox 多选框 - 图1

单独使用

使用 v-model 可以双向绑定数据。

  1. <template>
  2. <Checkbox v-model="single">Checkbox</Checkbox>
  3. </template>
  4. <script>
  5. export default {
  6. data () {
  7. return {
  8. single: false
  9. }
  10. }
  11. }
  12. </script>

Checkbox 多选框 - 图2

组合使用

使用CheckboxGroup配合数组来生成组合。在组合使用时,Checkbox 使用 label 来自动判断选中状态。每个 Checkbox 的内容可以自定义,如不填写则默认使用 label 的值。

  1. <template>
  2. <CheckboxGroup v-model="social">
  3. <Checkbox label="twitter">
  4. <Icon type="logo-twitter"></Icon>
  5. <span>Twitter</span>
  6. </Checkbox>
  7. <Checkbox label="facebook">
  8. <Icon type="logo-facebook"></Icon>
  9. <span>Facebook</span>
  10. </Checkbox>
  11. <Checkbox label="github">
  12. <Icon type="logo-github"></Icon>
  13. <span>Github</span>
  14. </Checkbox>
  15. <Checkbox label="snapchat">
  16. <Icon type="logo-snapchat"></Icon>
  17. <span>Snapchat</span>
  18. </Checkbox>
  19. </CheckboxGroup>
  20. <CheckboxGroup v-model="fruit">
  21. <Checkbox label="香蕉"></Checkbox>
  22. <Checkbox label="苹果"></Checkbox>
  23. <Checkbox label="西瓜"></Checkbox>
  24. </CheckboxGroup>
  25. </template>
  26. <script>
  27. export default {
  28. data () {
  29. return {
  30. social: ['facebook', 'github'],
  31. fruit: ['苹果']
  32. }
  33. }
  34. }
  35. </script>

Checkbox 多选框 - 图3

不可用

通过设置disabled属性来禁用多选框。

<template>
    <Checkbox v-model="disabledSingle" disabled>Checkbox</Checkbox>
    <CheckboxGroup v-model="disabledGroup">
        <Checkbox label="香蕉" disabled></Checkbox>
        <Checkbox label="苹果" disabled></Checkbox>
        <Checkbox label="西瓜"></Checkbox>
    </CheckboxGroup>
</template>
<script>
    export default {
        data () {
            return {
                disabledSingle: true,
                disabledGroup: ['苹果']
            }
        }
    }
</script>

Checkbox 多选框 - 图4

显示边框

4.0.0 设置属性 border 可以显示边框。

<template>
    <CheckboxGroup v-model="border">
        <Checkbox label="香蕉" border></Checkbox>
        <Checkbox label="苹果" border></Checkbox>
        <Checkbox label="西瓜" border></Checkbox>
    </CheckboxGroup>
</template>
<script>
    export default {
        data () {
            return {
                border: ['香蕉']
            }
        }
    }
</script>

Checkbox 多选框 - 图5

与其它组件通信

与其它组件进行数据联动。

<template>
    <Checkbox v-model="checked" :disabled="disabled">
        <span v-if="checked">Checked</span>
        <span v-else>Unchecked</span>
         - 
        <span v-if="!disabled">Usable</span>
        <span v-else>Disabled</span>
    </Checkbox>
    <br>
    <Button type="primary" @click="checked = !checked">
        <span v-if="!checked">Checked</span>
        <span v-else>Unchecked</span>
    </Button>
    <Button type="primary" @click="disabled = !disabled">
        <span v-if="disabled">Usable</span>
        <span v-else>Disabled</span>
    </Button>
</template>
<script>
    export default {
        data () {
            return {
                checked: true,
                disabled: false
            }
        }
    }
</script>

Checkbox 多选框 - 图6

全选

在实现全选效果时,你可能会用到 indeterminate 属性。示例代码只是一种写法,业务中可以用更多的方法,比如计算属性。

<template>
    <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
        <Checkbox
            :indeterminate="indeterminate"
            :value="checkAll"
            @click.prevent.native="handleCheckAll">全选</Checkbox>
    </div>
    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
        <Checkbox label="香蕉"></Checkbox>
        <Checkbox label="苹果"></Checkbox>
        <Checkbox label="西瓜"></Checkbox>
    </CheckboxGroup>
</template>
<script>
    export default {
        data () {
            return {
                indeterminate: true,
                checkAll: false,
                checkAllGroup: ['香蕉', '西瓜']
            }
        },
        methods: {
            handleCheckAll () {
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;

                if (this.checkAll) {
                    this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
                } else {
                    this.checkAllGroup = [];
                }
            },
            checkAllGroupChange (data) {
                if (data.length === 3) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            }
        }
    }
</script>

API

Checkbox props

属性说明类型默认值
value只在单独使用时有效。可以使用 v-model 双向绑定数据Booleanfalse
label只在组合使用时有效。指定当前选项的 value 值,组合会自动判断是否选中String | Number | Boolean-
disabled是否禁用当前项Booleanfalse
indeterminate设置 indeterminate 状态,只负责样式控制Booleanfalse
size多选框的尺寸,可选值为 largesmalldefault 或者不设置String-
border 4.0.0是否显示边框Booleanfalse
true-value选中时的值,当使用类似 1 和 0 来判断是否选中时会很有用String, Number, Booleantrue
false-value没有选中时的值,当使用类似 1 和 0 来判断是否选中时会很有用String, Number, Booleanfalse

Checkbox events

事件名说明返回值
on-change只在单独使用时有效。在选项状态发生改变时触发,通过修改外部的数据改变时不会触发true | false

CheckboxGroup props

属性说明类型默认值
value指定选中项目的集合,可以使用 v-model 双向绑定数据Array[]
size多选框组的尺寸,可选值为 largesmalldefault 或者不设置String-

CheckboxGroup events

事件名说明返回值
on-change在选项状态发生改变时触发,返回已选中的数组。通过修改外部的数据改变时不会触发[…]