FitsCheckboxAll 全选

基本用法

基本用法

基础的复选框组件展示。

<template>
    <fits-checkbox-all :options="state" />
</template>

<script lang="ts" setup>
import { FitsCheckboxAll } from '@/fits-components';
import { FitsCheckboxAllModel } from '@/fits-components/type'
import { reactive } from 'vue';

const state = reactive(new FitsCheckboxAllModel({
    option: [
        {
            label: "生态蔬菜",
            disabled: false
        },
        {
            label: "新鲜水果",
            disabled: false
        },
        {
            label: "蛋糕甜点",
            disabled: false
        },
    ]
}))

</script>
<style lang="scss" scoped>

</style>

<style lang="scss">

</style>

默认选中

默认选中

通过设置modelValue属性可以传递默认值，该值为选项的label组成的数组。

<template>
    <fits-checkbox-all :options="state" :modelValue="['生态蔬菜', '新鲜水果']" />
</template>

<script lang="ts" setup>
import { FitsCheckboxAll } from '@/fits-components';
import { FitsCheckboxAllModel } from '@/fits-components/type'
import { reactive } from 'vue';

const state = reactive(new FitsCheckboxAllModel({
    option: [
        {
            label: "生态蔬菜",
            disabled: false
        },
        {
            label: "新鲜水果",
            disabled: false
        },
        {
            label: "蛋糕甜点",
            disabled: false
        },
    ]
}))

</script>
<style lang="scss" scoped>

</style>

<style lang="scss">

</style>

禁用选项

禁用选项

为option中的选项设置disabled = true，即可禁用该选项。

<template>
    <fits-checkbox-all :options="state" />
</template>

<script lang="ts" setup>
import { FitsCheckboxAll } from '@/fits-components';
import { FitsCheckboxAllModel } from '@/fits-components/type'
import { reactive } from 'vue';

const state = reactive(new FitsCheckboxAllModel({
    option: [
        {
            label: "生态蔬菜",
            disabled: true
        },
        {
            label: "新鲜水果",
            disabled: false
        },
        {
            label: "蛋糕甜点",
            disabled: false
        },
    ]
}))
</script>
<style lang="scss" scoped>

</style>

<style lang="scss">

</style>

限制选择数量

限制选择数量

设置checkboxGroup.min和checkboxGroup.max可以控制选项的最小和最大数量。

<template>
    <fits-checkbox-all :options="state" />
</template>

<script lang="ts" setup>
import { FitsCheckboxAll } from '@/fits-components';
import { FitsCheckboxAllModel } from '@/fits-components/type'
import { reactive } from 'vue';

const state = reactive(new FitsCheckboxAllModel({
    option: [
        {
            label: "生态蔬菜",
            disabled: false,
        },
        {
            label: "新鲜水果",
            disabled: false
        },
        {
            label: "蛋糕甜点",
            disabled: false
        },
        {
            label: "烧烤小吃",
            disabled: false
        },
        {
            label: "快餐便当",
            disabled: false
        },
        {
            label: "甜品饮料",
            disabled: false
        }
    ],
    checkboxGroup: {
        min: 1,
        max: 4
    }
}))

</script>
<style lang="scss" scoped>

</style>

<style lang="scss">

</style>

FitsCheckboxAllModel属性

属性	说明	类型	可选值	默认值
option	选项按钮	CheckboxProps[]	必填	-
checkboxGroup	checkbox-group的配置	CheckboxGroupProps	非必填	-

事件

事件名	说明	回调参数
update:modelValue	当选中值发生变化时触发	一个参数，为被选中节点的id。类型为字符串，如果多选则为字符串数组。

插槽

暂无可用的插槽