Collapse 折叠面板

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 title 属性设置面板标题。

<zq-collapse title="标题一">
  <text>这是折叠面板的内容区域。</text>
</zq-collapse>
<zq-collapse title="标题二">
  <text>这是折叠面板的内容区域。</text>
</zq-collapse>

默认展开

通过 expanded 属性设置默认展开状态。

<zq-collapse title="默认展开" expanded>
  <text>这是默认展开的内容。</text>
</zq-collapse>

双向绑定

通过 v-model:expanded 双向绑定展开状态。

<zq-collapse title="标题" v-model:expanded="isExpanded">
  <text>内容</text>
</zq-collapse>
<zq-button :text="isExpanded ? '收起' : '展开'" @click="isExpanded = !isExpanded" />

const isExpanded = ref(false)

带图标

通过 icon 属性设置标题左侧图标。

<zq-collapse title="设置" icon="settings">
  <text>设置内容</text>
</zq-collapse>

禁用状态

通过 disabled 属性禁用折叠面板。

<zq-collapse title="禁用面板" disabled>
  <text>无法展开</text>
</zq-collapse>

隐藏边框

通过 :border="false" 隐藏标题底部边框。

<zq-collapse title="无边框" :border="false">
  <text>内容</text>
</zq-collapse>

API

Props

参数	说明	类型	默认值
title	面板标题	string	''
icon	标题左侧图标名称	string	''
expanded	是否展开（支持 v-model）	boolean	false
border	是否显示标题底部边框	boolean	true
disabled	是否禁用	boolean	false

Events

事件名	说明	回调参数
update:expanded	展开状态变化时触发	value: boolean
change	展开状态变化时触发	value: boolean

Slots

名称	说明
default	面板内容

注意事项

• 展开/收起有 0.3s 的过渡动画。
• 内容区域最大高度为 2000rpx，超出部分会被隐藏。
• 箭头图标在展开时会旋转 180 度。

主题定制

变量名	说明
--color-bg-card	面板背景色
--color-divider	标题底部边框颜色
--color-text-primary	标题文字颜色
--color-text-secondary	图标/内容文字颜色
--color-text-placeholder	箭头图标颜色