Collapse 折叠面板

实现内容区域的折叠和展开，用于收纳长内容。

基础用法

通过 NueCollapse 和 NueCollapseItem 组件，实现内容区域的折叠和展开。

<template>
    <nue-collapse>
        <nue-collapse-item name="Collapse item A" title="折叠项标题">
            <nue-text>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Doloremque quod atque recusandae dolorum. Dignissimos ipsa aut
                error aliquid eos veniam fuga illo inventore, quisquam sequi
                itaque esse quis facilis illum.
            </nue-text>
        </nue-collapse-item>
    </nue-collapse>
</template>

记录面板状态

通过 v-model 绑定一个响应式数据用于记录或控制每个面板的展开状态，该数据可以是 string 或 string[] 类型的值。

通过 name 属性为每个面板指定一个标识符，用于记录。当面板展开时，对应的 name 值会被添加到该数组中，当面板收起时，对应的 name 值会被从数组中移除。

TIP

v-model 值为 string 类型仅支持在手风琴模式下使用，在非手风琴模式下传入 string 类型则会被修改为 string[] 类型。

<template>
    <nue-collapse v-model="activeNames">
        <nue-collapse-item name="Collapse item A" title="折叠项 A 标题">
            <nue-text>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
                asperiores amet, nihil quisquam rem, esse, consequuntur corporis
                sunt aliquid sapiente inventore autem dignissimos aut accusamus
                et iste magni vitae enim?
            </nue-text>
        </nue-collapse-item>
        <nue-collapse-item name="Collapse item B" title="折叠项 B 标题">
            <nue-text>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
                asperiores amet, nihil quisquam rem, esse, consequuntur corporis
                sunt aliquid sapiente inventore autem dignissimos aut accusamus
                et iste magni vitae enim?
            </nue-text>
        </nue-collapse-item>
    </nue-collapse>
    <p></p>
    <nue-div> 已展开的面板: {{ activeNames }}</nue-div>
</template>

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

const activeNames = ref([]);
</script>

手风琴模式

通过 accordion 属性设置是否开启手风琴模式，开启后有且只能有一个面板可以被展开。

TIP

手风琴模式下仅有一个面板能够内展开，因此 v-model 的值只会是 string 类型，若传入 string[] 类型，最终也会被修改为 string 类型。

<template>
    <nue-collapse v-model="activeNames" accordion>
        <nue-collapse-item name="Collapse item A" title="折叠项 A 标题">
            <nue-text>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quibusdam voluptas harum velit, odit eaque aliquid optio
                excepturi quas! Deserunt sequi quisquam vero magni itaque
                assumenda facere dolore id tempora ab?
            </nue-text>
        </nue-collapse-item>
        <nue-collapse-item name="Collapse item B" title="折叠项 B 标题">
            <nue-text>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Nesciunt molestias illum reprehenderit fugiat ea corrupti et
                officiis nemo! Tenetur, in laborum consequatur nam quas
                molestias magni mollitia a et delectus?
            </nue-text>
        </nue-collapse-item>
    </nue-collapse>
    <p></p>
    <nue-div> 已展开的面板: {{ activeNames }}</nue-div>
</template>

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

const activeNames = ref(['Collapse item A']);
</script>

自定义标题

通过 title 属性自定义面板的标题。

也可以通过 header 这个作用域插槽自定义面板的头部。解构出来的 collpase 函数操作该面板的展开和收起；state 获取面板展开状态。

<template>
    <nue-collapse>
        <nue-collapse-item title="折叠项 自定标题">
            <nue-text>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quibusdam voluptas harum velit, odit eaque aliquid optio
                excepturi quas! Deserunt sequi quisquam vero magni itaque
                assumenda facere dolore id tempora ab?
            </nue-text>
        </nue-collapse-item>
        <nue-collapse-item>
            <template #header="{ collapse, state }">
                <nue-div
                    align="center"
                    justify="space-between"
                    @click.stop="collapse"
                >
                    <nue-text size="14px">折叠项 自定义头部</nue-text>
                    <nue-text size="14px">
                        {{ state ? '展开' : '收起' }}
                    </nue-text>
                </nue-div>
            </template>
            <nue-text>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
                ullam iusto laudantium dignissimos repellendus delectus
                perferendis numquam quia quibusdam, et modi a. Ut cumque
                molestias quidem. Similique deserunt facilis labore.
            </nue-text>
        </nue-collapse-item>
    </nue-collapse>
</template>
<script lang="ts" setup></script>

使用预设或自定义主题

通过 theme 属性设置主题。

<template>
    <nue-div class="wrapper">
        <nue-container class="vp-raw">
            <nue-main aside-width="200px">
                <template #aside>
                    <nue-collapse v-model="activeNames" theme="menu">
                        <nue-collapse-item name="Collapse item A" title="菜单">
                            <nue-div align="stretch" gap="8px" vertical>
                                <nue-link icon="board" theme="rl,rl-s,actived">
                                    仪表盘
                                </nue-link>
                                <nue-link icon="projects" theme="rl,rl-s">
                                    清单
                                </nue-link>
                            </nue-div>
                        </nue-collapse-item>
                        <nue-collapse-item name="Collapse item B" title="高级">
                            <nue-link icon="setting" theme="rl,rl-s">
                                设置
                            </nue-link>
                        </nue-collapse-item>
                    </nue-collapse>
                </template>
                <template #content>内容</template>
            </nue-main>
        </nue-container>
    </nue-div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const activeNames = ref(['Collapse item A', 'Collapse item B']);
</script>

<style scoped>
.wrapper {
    border: 1px solid var(--nue-divider-color);
    border-radius: var(--nue-primary-radius);
    height: 360px;
    overflow: hidden;
}
</style>