@58fe/p5/src/doc/collapse.md

pc端vue组件

<script>
	module.exports = {
		data() {
			return {
				list: [
					{text: '掘金酱：在家办公一周后会，我的技术精进了！', childrens: []},
					{text: 'chocko：巧妙实现带圆角的渐变边框', childrens: ['border-image', 'border-image']},
					{text: '只会番茄炒蛋：程序员的“北漂”，我希望还能坚持下去', childrens: ['租房', '买房', '失恋', '转行', '2020目标']},
					{text: '徐小夕_Lab实验室：精通React/Vue系列之实现一个全局提示(Message)组件', childrens: ['正文', '最后', '更堵推荐']},
					{text: 'lzg9527：总结移动端H5开发常用技巧（干货满满哦！）', childrens: []},
					{text: '李一枫：与Viewport有关的理解', childrens: []},
					{text: '黄景圣：分享一些前端常用功能集合', childrens: ['http请求', 'swiper轮播图组件', '3. 图片懒加载', '4. 上传图片', '5. 下拉刷新组件', '6. 监听滚动到底部', '7. 音频播放组件']},
					{text: 'jsonchao：深入探索Android卡顿优化（下）', childrens: ['一、ANR分析与实战', '二、卡顿单点问题检测方案', '三、如何实现界面秒开？', '四、优雅监控耗时盲区', '五、卡顿优化技巧总结', '六、常见卡顿问题解决方案总结', '七、卡顿优化的常见问题']}
				]
			}
		}
	}
</script>
## Collapse 折叠面板

### 引入

```javascript
import { collapse,  collapseItem} from '@58fe/p5';
```

### 基本用法
如果面板内有嵌套，设置template为`v-slot:children`，再向内填充内容
:::demo 

```html
<collapse>
	<collapse-item v-for="(item, index) in list" :key="index">
		{{item.text}}
		<template v-slot:children v-if="item.childrens.length > 0">
			<div v-if="item.childrens.length > 0">
				<collapse-item v-for="(children, i) in item.childrens" :key="i">
				{{children}}
				</collapse-item>
			</div>
		</template>
	</collapse-item>
</collapse>
```

:::


### 手风琴效果
手风琴效果，通过设置`accordion`属性，每次只能打开一个面板
:::demo 

```html
<collapse :accordion="true">
	<collapse-item v-for="(item, index) in list" :key="index">
		{{item.text}}
		<template v-slot:children v-if="item.childrens.length > 0">
			<div v-if="item.childrens.length > 0">
				<collapse-item v-for="(children, i) in item.childrens" :key="i">
				{{children}}
				</collapse-item>
			</div>
		</template>
	</collapse-item>
</collapse>
```

:::


### 默认打开
通过设置`active`属性，为子元素的索引值，默认打开子元素
:::demo 

```html
<collapse :active="0">
	<collapse-item v-for="(item, index) in list" :key="index">
		{{item.text}}
		<template v-slot:children v-if="item.childrens.length > 0">
			<div v-if="item.childrens.length > 0">
				<collapse-item v-for="(children, i) in item.childrens" :key="i">
				{{children}}
				</collapse-item>
			</div>
		</template>
	</collapse-item>
</collapse>
```

:::

### 参数

| 参数         | 说明           | 类型                | 可选值       | 默认值  |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| accordion         | 手风琴效果       | Boolean |  ——          | false      |
| active | 默认打开的索引值    | Number             | ——       | -1 |