引入组件

局部引入

// parent.vue
const FCollapse = defineAsyncComponent(() => import('@/components/formaui/f-collapse/f-collapse.vue'))

基础用法

手风琴模式：通过 index 与 activeIndex 控制展开项

<f-collapse :index="0" :active-index="activeIndex" @click="onClick">
  <template #title>
    <f-cell :show-arrow="false" :show-line="false">标题一</f-cell>
  </template>
  <template #content>
    <view class="px-4 py-3">折叠面板内容一</view>
  </template>
</f-collapse>

import { ref } from 'vue'

const activeIndex = ref(0)

const onClick = (detail: { index: number }) => {
  activeIndex.value = detail.index
}

点击切换展开/收起

const onToggleClick = (detail: { index: number }) => {
  toggleIndex.value = toggleIndex.value === detail.index ? -1 : detail.index
}

disabled属性：禁用（默认false）

<f-collapse :index="0" :active-index="activeIndex" disabled>
  <template #title>
    <f-cell :show-arrow="false" :show-line="false">禁用状态</f-cell>
  </template>
  <template #content>
    <view class="px-4 py-3">不可点击</view>
  </template>
</f-collapse>

showArrow属性：是否显示箭头（默认true）

<f-collapse :index="0" :active-index="activeIndex" :show-arrow="false" />

headerBgColor / bodyBgColor属性：自定义背景色

<f-collapse header-bg-color="#F5F7FA" body-bg-color="#F5F7FA" />

height属性：展开高度（默认auto）

固定高度时使用具体值，如 height="200rpx"。

插槽

名称	说明
title	标题区域
content	折叠内容

属性

名称	类型	说明	默认值
bgColor	string	面板背景颜色	transparent
headerBgColor	string	标题栏背景颜色	#FFFFFF
bodyBgColor	string	内容区背景颜色	transparent
height	string	展开时内容区高度，auto 自适应	auto
index	number	面板索引	0
activeIndex	number	当前展开的面板索引，相等时展开	-1
disabled	boolean	是否禁用	false
showArrow	boolean	是否显示箭头	true
arrowColor	string	箭头颜色	#0B1D4A

事件

事件名	说明	回调参数
click	点击标题栏时	{ index }

方法

方法名	说明	传入参数
-	-	-