Slidedown 折叠面板

折叠面板组件用于将内容区域折叠/展开，节省页面空间，适合 FAQ、配置项分组等场景。

基础用法

默认插槽为始终可见的标题区域，#content 插槽为可展开的内容区。通过 v-model 控制展开/收起状态。

<TSlidedown v-model="isOpen">
  <span class="fw-semibold">标题区域</span>
  <template #content>
    <p>展开后的内容。</p>
  </template>
</TSlidedown>

无边框模式

设置 :border="false" 移除边框。

<TSlidedown :border="false">
  <span>标题区域</span>
  <template #content>...</template>
</TSlidedown>

点击任意位置展开

设置 click-anywhere-expand，点击面板任意位置即可展开。

<TSlidedown click-anywhere-expand>
  <span>标题区域</span>
  <template #content>...</template>
</TSlidedown>

隐藏箭头

设置 :arrow="false" 隐藏底部箭头。

<TSlidedown :arrow="false">
  <span>标题区域</span>
  <template #content>...</template>
</TSlidedown>

前置拦截

通过 beforeToggle 函数可以在展开前做校验。返回 false 阻止切换，返回 true 正常执行。支持异步函数，可用于付费内容校验、权限检查等场景。

<TSlidedown :before-toggle="beforeExpand">
  <span>付费内容</span>
  <template #content>
    <p>支付后才能看到的内容。</p>
  </template>
</TSlidedown>

<script setup>
  async function beforeExpand(next) {
    if (!next) return true // 收起不拦截
    const res = await fetch('/api/check-payment')
    const data = await res.json()
    return data.paid
  }
</script>

自定义箭头

通过 #arrow 作用域插槽可以完全自定义底部箭头区域，接收 expanded（展开状态）、loading（加载中）和 toggle（切换方法）三个参数。

<TSlidedown>
  <span>高级设置</span>
  <template #content>...</template>
  <template #arrow="{ expanded }">
    <span class="badge">{{ expanded ? '收起' : '展开' }}</span>
  </template>
</TSlidedown>

API

Props

Prop	说明	类型	默认值
v-model	展开/收起状态	boolean	false
arrow	显示底部箭头	boolean	true
border	显示边框	boolean	true
clickAnywhereExpand	点击任意位置展开	boolean	false
clickAnywhereCollapse	点击任意位置收起	boolean	false
beforeToggle	展开/收起前置拦截函数，返回 false 阻止切换	(newValue: boolean) => boolean | Promise<boolean>	undefined

Slots

插槽	说明
default	始终可见的标题/头部区域
content	可展开的内容区域
arrow	自定义底部箭头，作用域：{ expanded: boolean, loading: boolean, toggle: () => void }