VUE 实现 Studio 管理后台（五）：手风琴式折叠组件（Accordion）

作为一个有目标的人（目标是做一个好用的 Bootstrap 可视化编辑器，第一个版本已经实现，演示地址：https://vular.cn/rxeditor/，代码地址：https://github.com/vularsoft/rxeditor），工作比较积极，思维也比较活跃，睡眠相对较少。今早 6:30 就起床了，吃早饭前，实现了一个手风琴式折叠组件，具体效果如下：

一般情况，这样的控件有两种表现形式：

1、排他展开，也就是一次只有一个项目展开，其它闭合，类似 QQ 的好友分组。

2、随意展开，不拍它，可以同时展开多个

只实现第二种方式，相对比较容易，每个子项目控制自己的状态就可以，不用跟其它项目交互。我的目标式做一个控件，两种方式都支持，通过属性参数 multiple 确定是否可以同时展开多个。

添加新的文件跟目录：

跟上次实现 Tabs 控件一样，有一个通用的子组件：CollapsibleItem，基于这个组件实现折叠组件：SimpleAccordion。如果以后像实现其它风格的折叠组件，可以共用 CollapsibleItem 组件。根据我个人的习惯，首先设想这个组件的使用方式，应该是这样：

<SimpleAccordion :multiple='true'> 
    <CollapsibleItem>
    <template #heading>标题1</template>
    <template #body>内容1....</template>
    </CollapsibleItem>
    <CollapsibleItem>
    <template #heading>标题2</template>
    <template #body>内容2....</template>
    </CollapsibleItem>
</SimpleAccordion>

按照这样的需求，先写 SimpleAccordion 的模板代码：

<template>
  <div class="simple-accordion">
    <slot></slot>
  </div>
</template>

看起来非常简单，接下来再写 CollapsibleItem 的模板代码：

<template>
  <div class="collapsible-item" :class="!isActive ? 'item-collapse' : ''">
    <div class="item-heading" @click="click">
      <slot name="heading"></slot>
    </d