Checkbox 复选

概述

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

使用指南

在.vue中引入组件

<script>
    import iCheckboxGroup from 'iview-mpvue/dist/components/checkbox-group/checkbox-group'
    export default {
        components: {
            'i-checkbox-group': iCheckboxGroup
        }
    }
</script>

在main.js中引入样式文件

import 'iview-mpvue/dist/components/checkbox-group/style/css'

示例

<i-panel title="group-水果">
    <i-checkbox-group @change="handleFruitChange" :groups="fruit" :current="current" :position="position"></i-checkbox-group>
</i-panel>
<i-button @click="handleClick" type="ghost">切换单选框位置</i-button>

<script>
    export default {
        ...
        data() {
            return {
                fruit: [{
                    id: 1,
                    value: '香蕉'
                }, {
                    id: 2,
                    value: '苹果'
                }, {
                    id: 3,
                    value: '西瓜'
                }, {
                    id: 4,
                    value: '葡萄'
                }],
                current: ['苹果', '葡萄'],
                position: 'left'
            }
        },
        methods: {
            handleFruitChange(evt) {
                this.current = evt.value
            },
            handleClick() {
                this.position = this.position === 'left' ? 'right' : 'left'
            }
        }
}
</script>

API

CheckboxGroup properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
current	指定当前选中的项目 value	Array	[]
color	主题色	String	-

CheckboxGroup events

事件名	说明	返回值
v-on:change	切换选项时触发	current

CheckboxItem properties

属性	说明	类型	默认值
i-item-class	自定义 class 类名	String	-
value	当前项的 value	String	-
checked	当前项是否选中	Boolean	false
disabled	是否禁用当前项	Boolean	false