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

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

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

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

两个 slot 分别对应每个折叠项的标题跟内容。如果该项被折叠的话，那么放置 css class: item-collapse。标题容器 DIV 接收 click 事件。脚本代码：

其他部分跟 tabs 控件一样，并不难理解，需要注意的是 click 方法，这个方法接收到鼠标点击事件后，在分发给它的父组件，本例中父组件就是 SimpleAccordion。

再看 SimpleAccordion 的脚本代码：

在 mounted 的方法中，在所有的子项上注册事件 “itemClick”，这个事件在子组件中分发。事件处理方法 itemClick 根据需要，激活相应的项目。

这样这个控件就完成了，对应的 CSS：