Fes Design

Checkbox 复选框 ​

组件注册 ​

js
import { FCheckbox, FCheckboxGroup } from '@fesjs/fes-design';

app.use(FCheckbox);
app.use(FCheckboxGroup);

代码演示 ​

基础用法 ​

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

play
<template>
    <FSpace>
        <FCheckbox>复选框</FCheckbox>
        <FCheckbox disabled>复选框-禁用状态</FCheckbox>
        <FCheckbox indeterminate>复选框-不确定状态</FCheckbox>
    </FSpace>
</template>

组合用法 ​

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

play
<template>
    <FSpace>
        <FCheckboxGroup v-model="arr" @change="handleChange">
            <FCheckbox v-for="i in len" :key="i" :value="i">
                {{ i }}
            </FCheckbox>
        </FCheckboxGroup>
    </FSpace>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const len = 30;
        const arr = ref([]);
        const handleChange = (value) => {
            console.log('[checkbox.group] [handleChange] value:', value);
        };
        return {
            len,
            arr,
            handleChange,
        };
    },
};
</script>

垂直方向 ​

play
<template>
    <FSpace>
        <FCheckboxGroup vertical>
            <FCheckbox :value="1">1</FCheckbox>
            <FCheckbox :value="2">22</FCheckbox>
            <FCheckbox :value="3">333</FCheckbox>
        </FCheckboxGroup>
        <FCheckboxGroup vertical disabled>
            <FCheckbox :value="1">1</FCheckbox>
            <FCheckbox :value="2">22</FCheckbox>
            <FCheckbox :value="3">333</FCheckbox>
        </FCheckboxGroup>
    </FSpace>
</template>

配置方式 ​

通过配置 options 直接生成选项

play
<template>
    <FSpace>
        <FCheckboxGroup
            v-model="arr"
            :options="options"
            @change="handleChange"
        />
    </FSpace>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const len = 10;
        const options = ref([]);
        const arr = ref([]);

        for (let index = 1; index <= len; index++) {
            options.value.push({
                label: index,
                value: index,
            });
        }

        const handleChange = (value) => {
            console.log('[checkbox.options] [handleChange] value:', value);
        };
        return {
            arr,
            options,
            handleChange,
        };
    },
};
</script>

Checkbox Props ​

属性说明类型默认值
disabled是否禁用booleanfalse
indeterminate不确定状态，只负责样式控制booleanfalse
label描述和介绍stringnull
v-model绑定值booleanfalse
value选中状态的值（搭配 CheckboxGroup 使用时有效）string / number / booleannull

Checkbox Events ​

事件名称说明回调参数
change当绑定值变化时触发的事件更新后的值

Checkbox Slots ​

名称说明
default描述和介绍。相比 label，slot 优先使用

CheckboxGroup Props ​

属性说明类型默认值
disabled是否禁用booleanfalse
v-model绑定值arraynull
vertical是否垂直排列（默认水平排列）booleanfalse
options选项配置array<Option>[]
valueField替代 Option 中的 value 字段名stringvalue
labelField替代 Option 中的 label 字段名stringlabel

CheckboxGroup Events ​

事件名称说明回调参数
change当绑定值变化时触发的事件更新后的值

CheckboxGroup Slots ​

名称说明
defaultCheckbox 组件

Option Props ​

属性说明类型默认值
value选项的值，需要唯一string / number / boolean-
label选项的标签string / number-
disabled是否禁用booleanfalse