Collapse 折叠面板

基础用法

查看代码

<template>
    <div style="width: 320px">
        <Button @click="open = !open">{{ open ? "收起" : "展开" }}</Button>
        <Collapse :open="open">
            <div style="padding: 16px; background: #fafafa; margin-top: 8px; border-radius: 6px">
                这是可折叠的内容区域，支持平滑展开 / 收起动画。
            </div>
        </Collapse>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Button, Collapse } from "@a-drowned-fish/rox-v";

const open = ref(false);
</script>

Props

参数	说明	类型	默认值
open	是否展开	boolean	false
maxHeight	展开时最大高度（用于过渡）	number | string	"100dvh"
duration	动画时长（ms）	number	200

插槽

插槽名	说明
default	折叠区域内容