Fes Design

Collapse 折叠面板 ​

通过折叠面板收纳内容区域

组件注册 ​

js
import { FCollapse } from 'fes-design';

app.use(FCollapse);

基础用法 ​

可同时展开多个面板，面板之间不影响

play
<template>
    <div class="demo-collapse">
        <FCollapse v-model="activeNames">
            <FCollapseItem title="Consistency" name="1">
                <div>
                    岁月静好，浅笑安然。打开记忆的闸门，仿佛又回到了那年那月那时光，仿佛又见到你送给我的那盆清香茉莉，在细雨潇潇的夜晚，所呈现出来的洁净和楚楚动人。以前的过往总是在记忆深处，以固有的姿态，以从未稍离的执着提醒我，生命中有一种存在，叫以前。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Feedback" name="2">
                <div>
                    生活是蜿蜒在山中的小径，坎坷不平，沟崖在侧。摔倒了，要哭就哭吧，怕什么，不心装模作样！这是直率，不是软弱，因为哭一场并不影响赶路，反而能增添一份留意。山花烂漫，景色宜人，如果陶醉了，想笑就笑吧，不心故作矜持！这是直率，不是骄傲，因为笑一次并不影响赶路，反而能增添一份信心。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Efficiency" name="3">
                <div>
                    喜欢一种情意，浅浅淡淡，不远不近。念起便有一种沁心的暖，知心的柔。岁月轮转，韶华渐老，惟愿人依旧安静，温雅。世事经年，惟愿情怀依旧宁静如初。静默时光的彼岸，就让我宁心等待一场必然来临的春暖花开。即使偶尔会有心潮澎湃，亦是沉寂中的安恬与端庄。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Controllability" name="4">
                <div>
                    一弯月光，风飘云漫，多少个明月夜，寂寞走不出思念的射线，静静的听你梦中的心跳，轻嗅你唇边的香息，柔醉你缱绻的缠绵。衣袂飘飘，心香瓣瓣，在飘渺的细雨中，衍生了无尽的眷恋。用一生的深情与你凝眸相拥，朝夕相伴。幽篁深处，落叶与娇花相随，你我的沉醉，静默了一池山水。
                </div>
            </FCollapseItem>
        </FCollapse>
    </div>
</template>

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

export default {
    setup() {
        const activeNames = ref(['1']);

        return {
            activeNames,
        };
    },
};
</script>

手风琴效果 ​

每次只能展开一个面板

通过 accordion 属性来设置是否以手风琴模式显示。

play
<template>
    <FSpace vertical>
        <FSwitch v-model="accordion">手风琴模式</FSwitch>
        <FCollapse
            v-model="activeName"
            :accordion="accordion"
            :embedded="false"
        >
            <FCollapseItem title="Consistency" name="1">
                <div>
                    岁月静好，浅笑安然。打开记忆的闸门，仿佛又回到了那年那月那时光，仿佛又见到你送给我的那盆清香茉莉，在细雨潇潇的夜晚，所呈现出来的洁净和楚楚动人。以前的过往总是在记忆深处，以固有的姿态，以从未稍离的执着提醒我，生命中有一种存在，叫以前。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Feedback" name="2">
                <div>
                    生活是蜿蜒在山中的小径，坎坷不平，沟崖在侧。摔倒了，要哭就哭吧，怕什么，不心装模作样！这是直率，不是软弱，因为哭一场并不影响赶路，反而能增添一份留意。山花烂漫，景色宜人，如果陶醉了，想笑就笑吧，不心故作矜持！这是直率，不是骄傲，因为笑一次并不影响赶路，反而能增添一份信心。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Efficiency" name="3">
                <div>
                    喜欢一种情意，浅浅淡淡，不远不近。念起便有一种沁心的暖，知心的柔。岁月轮转，韶华渐老，惟愿人依旧安静，温雅。世事经年，惟愿情怀依旧宁静如初。静默时光的彼岸，就让我宁心等待一场必然来临的春暖花开。即使偶尔会有心潮澎湃，亦是沉寂中的安恬与端庄。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Controllability" name="4">
                <div>
                    一弯月光，风飘云漫，多少个明月夜，寂寞走不出思念的射线，静静的听你梦中的心跳，轻嗅你唇边的香息，柔醉你缱绻的缠绵。衣袂飘飘，心香瓣瓣，在飘渺的细雨中，衍生了无尽的眷恋。用一生的深情与你凝眸相拥，朝夕相伴。幽篁深处，落叶与娇花相随，你我的沉醉，静默了一池山水。
                </div>
            </FCollapseItem>
        </FCollapse>
    </FSpace>
</template>

<script setup>
import { ref, watch } from 'vue';

const accordion = ref(true);

const activeName = ref('1');

watch(activeName, (name) =>
    console.log(
        '[FCollapse.accordion] activeName',
        JSON.parse(JSON.stringify(name)),
    ),
);
</script>

箭头在左边 ​

箭头在左边配置

play
<template>
    <div class="demo-collapse">
        <FRadioGroup v-model="arrow">
            <FRadio value="left">左侧</FRadio>
            <FRadio value="right">右侧</FRadio>
        </FRadioGroup>
        <FCollapse v-model="activeNames" :arrow="arrow">
            <FCollapseItem title="Consistency" name="1">
                <div>
                    岁月静好，浅笑安然。打开记忆的闸门，仿佛又回到了那年那月那时光，仿佛又见到你送给我的那盆清香茉莉，在细雨潇潇的夜晚，所呈现出来的洁净和楚楚动人。以前的过往总是在记忆深处，以固有的姿态，以从未稍离的执着提醒我，生命中有一种存在，叫以前。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Feedback" name="2">
                <div>
                    生活是蜿蜒在山中的小径，坎坷不平，沟崖在侧。摔倒了，要哭就哭吧，怕什么，不心装模作样！这是直率，不是软弱，因为哭一场并不影响赶路，反而能增添一份留意。山花烂漫，景色宜人，如果陶醉了，想笑就笑吧，不心故作矜持！这是直率，不是骄傲，因为笑一次并不影响赶路，反而能增添一份信心。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Efficiency" name="3">
                <div>
                    喜欢一种情意，浅浅淡淡，不远不近。念起便有一种沁心的暖，知心的柔。岁月轮转，韶华渐老，惟愿人依旧安静，温雅。世事经年，惟愿情怀依旧宁静如初。静默时光的彼岸，就让我宁心等待一场必然来临的春暖花开。即使偶尔会有心潮澎湃，亦是沉寂中的安恬与端庄。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Controllability" name="4">
                <div>
                    一弯月光，风飘云漫，多少个明月夜，寂寞走不出思念的射线，静静的听你梦中的心跳，轻嗅你唇边的香息，柔醉你缱绻的缠绵。衣袂飘飘，心香瓣瓣，在飘渺的细雨中，衍生了无尽的眷恋。用一生的深情与你凝眸相拥，朝夕相伴。幽篁深处，落叶与娇花相随，你我的沉醉，静默了一池山水。
                </div>
            </FCollapseItem>
        </FCollapse>
    </div>
</template>

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

export default {
    setup() {
        const activeNames = ref(['1']);
        const arrow = ref('left');

        return {
            arrow,
            activeNames,
        };
    },
};
</script>

背景色 ​

embedded 控制背景色

play
<template>
    <div class="demo-collapse">
        <FSwitch v-model="embedded" />
        <FCollapse v-model="activeNames" :embedded="embedded">
            <FCollapseItem title="Consistency" name="1">
                <div>
                    岁月静好，浅笑安然。打开记忆的闸门，仿佛又回到了那年那月那时光，仿佛又见到你送给我的那盆清香茉莉，在细雨潇潇的夜晚，所呈现出来的洁净和楚楚动人。以前的过往总是在记忆深处，以固有的姿态，以从未稍离的执着提醒我，生命中有一种存在，叫以前。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Feedback" name="2">
                <div>
                    生活是蜿蜒在山中的小径，坎坷不平，沟崖在侧。摔倒了，要哭就哭吧，怕什么，不心装模作样！这是直率，不是软弱，因为哭一场并不影响赶路，反而能增添一份留意。山花烂漫，景色宜人，如果陶醉了，想笑就笑吧，不心故作矜持！这是直率，不是骄傲，因为笑一次并不影响赶路，反而能增添一份信心。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Efficiency" name="3">
                <div>
                    喜欢一种情意，浅浅淡淡，不远不近。念起便有一种沁心的暖，知心的柔。岁月轮转，韶华渐老，惟愿人依旧安静，温雅。世事经年，惟愿情怀依旧宁静如初。静默时光的彼岸，就让我宁心等待一场必然来临的春暖花开。即使偶尔会有心潮澎湃，亦是沉寂中的安恬与端庄。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Controllability" name="4">
                <div>
                    一弯月光，风飘云漫，多少个明月夜，寂寞走不出思念的射线，静静的听你梦中的心跳，轻嗅你唇边的香息，柔醉你缱绻的缠绵。衣袂飘飘，心香瓣瓣，在飘渺的细雨中，衍生了无尽的眷恋。用一生的深情与你凝眸相拥，朝夕相伴。幽篁深处，落叶与娇花相随，你我的沉醉，静默了一池山水。
                </div>
            </FCollapseItem>
        </FCollapse>
    </div>
</template>

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

export default {
    setup() {
        const activeNames = ref(['1']);
        const embedded = ref(false);
        return {
            embedded,
            activeNames,
        };
    },
};
</script>

自定义面板标题 ​

除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。

play
<template>
    <div class="demo-collapse">
        <FCollapse accordion>
            <FCollapseItem title="Consistency" name="1">
                <template #title>
                    Consistency &nbsp;<InfoCircleFilled />
                </template>
                <div>
                    岁月静好，浅笑安然。打开记忆的闸门，仿佛又回到了那年那月那时光，仿佛又见到你送给我的那盆清香茉莉，在细雨潇潇的夜晚，所呈现出来的洁净和楚楚动人。以前的过往总是在记忆深处，以固有的姿态，以从未稍离的执着提醒我，生命中有一种存在，叫以前。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Feedback" name="2">
                <div>
                    生活是蜿蜒在山中的小径，坎坷不平，沟崖在侧。摔倒了，要哭就哭吧，怕什么，不心装模作样！这是直率，不是软弱，因为哭一场并不影响赶路，反而能增添一份留意。山花烂漫，景色宜人，如果陶醉了，想笑就笑吧，不心故作矜持！这是直率，不是骄傲，因为笑一次并不影响赶路，反而能增添一份信心。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Efficiency" name="3">
                <div>
                    喜欢一种情意，浅浅淡淡，不远不近。念起便有一种沁心的暖，知心的柔。岁月轮转，韶华渐老，惟愿人依旧安静，温雅。世事经年，惟愿情怀依旧宁静如初。静默时光的彼岸，就让我宁心等待一场必然来临的春暖花开。即使偶尔会有心潮澎湃，亦是沉寂中的安恬与端庄。
                </div>
            </FCollapseItem>
            <FCollapseItem title="Controllability" name="4">
                <div>
                    一弯月光，风飘云漫，多少个明月夜，寂寞走不出思念的射线，静静的听你梦中的心跳，轻嗅你唇边的香息，柔醉你缱绻的缠绵。衣袂飘飘，心香瓣瓣，在飘渺的细雨中，衍生了无尽的眷恋。用一生的深情与你凝眸相拥，朝夕相伴。幽篁深处，落叶与娇花相随，你我的沉醉，静默了一池山水。
                </div>
            </FCollapseItem>
        </FCollapse>
    </div>
</template>

<script></script>

Collapse 属性 ​

属性名详情类型可选值默认值
model-value / v-model当前激活的面板(如果是手风琴模式，绑定值类型需要为 string，否则为 array)string (accordion mode) / array (non-accordion mode)--
accordion是否手风琴模式boolean-false
arrow箭头位置 ( left, right ) ，默认右边string-right
embedded内容使用更深的背景色展现嵌入效果boolean-true

Collapse 插槽 ​

插槽名内容子标签
-自定义默认内容折叠项

Collapse Item 属性 ​

属性名说明类型可选值默认值
name唯一标志符string/number--
title面板标题string--
disabled是否禁用boolean--

Collapse Item 插槽 ​

属性名说明
-折叠项的内容
title折叠项标题的内容