Collapse 折叠面板

用于将大量文本、复杂配置或 FAQ 常见问题进行分组收纳的折叠控件，支持多开展开、手风琴单开 (accordion) 与下划线连贯形态。

---

代码示例

1. 基础折叠面板 (Basic Collapse)

使用 items 传入折叠项数组，每个折叠项包含 title、content 与可选的 icon。使用 v-model 双向绑定当前展开的项索引。

<template>
  <mu-collapse :items="items" v-model="activeIndexes" />
</template>

<script setup>
import { ref } from 'vue'

const activeIndexes = ref([0])
const items = ref([
  { title: 'MuZhiYu UI 设计理念', content: '基于 Vue 3 + SCSS 打造的全端极奢 UI 组件库。', icon: 'star' },
  { title: '多端自适应渲染', content: '一套代码，同时完美适配微信小程序、H5、iOS 及 Android。', icon: 'user' }
])
</script>

---

2. 手风琴单开模式 (Accordion)

设置 accordion 属性后，同时仅允许开一项，展开新项时旧项会自动平滑收起。

<template>
  <mu-collapse :items="faqItems" v-model="active" accordion />
</template>

<script setup>
import { ref } from 'vue'

const active = ref(0)
const faqItems = ref([
  { title: '手风琴选项一', content: '展开当前项时，其他已展开的折叠面板会自动优雅收起。' },
  { title: '手风琴选项二', content: '适用于常见问题解答（FAQ）或限制展示面积的设置面板。' }
])
</script>

---

3. 下划线连贯形态 (Line Variant)

设置 variant="line" 切换为极简分割线下划线内嵌形态。

<template>
  <mu-collapse :items="settingsItems" v-model="active" variant="line" />
</template>

---

Item 配置属性 (CollapseItem Object)

参数名	说明	类型	默认值
title	折叠面板标题文本	String	''
content	展开的主体文本内容	String	''
icon	标题左侧图标名称	String	''
value	标题右侧的辅助状态或数值文本	String	''
disabled	是否禁用该折叠项的展开收起	Boolean	false

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model / activeIndex	当前展开的项索引（手风琴模式下为 Number，多开模式下为 Array）	Number | Array	-	-1
items	折叠项配置数组	Array	-	[]
accordion	是否开启手风琴单开模式	Boolean	true | false	false
variant	外观形态	String	card | line	'card'
bordered	是否带有外边框	Boolean	true | false	true

---

事件说明 (Events)

事件名	说明	回调参数
change	展开/收起状态发生更改变时触发	(active: Number | Array)
update:modelValue	双向绑定更改变	(active: Number | Array)
update:activeIndex	v-model:activeIndex 双向绑定更新	(active: Number | Array)

---

插槽说明 (Slots)

插槽名	说明
default	折叠面板包含的子项内容区插槽