Collapse 折叠面板

使用 fui-collapse 组织多个 fui-collapse-item，支持手风琴模式；面板项也可独立使用。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 折叠面板组 -->
<fui-collapse accordion>
  <!-- 面板项 -->
  <fui-collapse-item :index="0">
    <text>使用说明</text>
    <template #content>
      <view>面板展开后的内容</view>
    </template>
  </fui-collapse-item>
</fui-collapse>

面板组属性

属性	类型	说明	官网默认值
accordion	Boolean	是否只允许一个面板项展开	false
background	String	面板组背景色	transparent

面板项属性

属性	类型	说明	官网默认值
index	Number / String	面板项索引或唯一标识	0
disabled	Boolean	是否禁用	false
background	String	标题背景色	#fff
animation	Boolean	是否启用展开动画	true
open	Boolean	是否展开	false
isBorder	Boolean	是否显示标题下边线	true
borderColor	String	分隔线颜色	#EEEEEE
borderLeft	Number / String	分隔线左侧偏移，单位 rpx	0
arrow	Boolean	是否显示箭头	true
arrowColor	String	箭头颜色	#B2B2B2
arrowRight	Number / String	箭头右侧间距，单位 rpx	24
contentBg	String	内容背景色	#fff
marginTop	Number / String	上外边距，单位 rpx	0
marginBottom	Number / String	下外边距，单位 rpx	0

事件

事件	说明	回调参数
change（面板组）	面板项展开状态切换	{ index, isOpen }
change（面板项）	独立使用时展开状态切换	{ index, isOpen }

插槽

插槽	说明
default	面板组内放置面板项；面板项内放置标题
content	面板项展开后的内容

平台说明

非 nvue 的 borderColor 本地默认值为空，可通过 --fui-color-border 控制默认颜色。