作为一个有目标的人（目标是做一个好用的 Bootstrap 可视化编辑器，第一个版本已经实现，演示地址：https://vular.cn/rxeditor/，代码地址：https://github.com/vularsoft/rxeditor），工作比较积极，思维也比较活跃，睡眠相对较少。今早 6:30 就起床了，吃早饭前，实现了一个手风琴式折叠组件，具体效果如下：
跟上次实现 Tabs 控件一样，有一个通用的子组件：CollapsibleItem，基于这个组件实现折叠组件：SimpleAccordion。如果以后像实现其它风格的折叠组件，可以共用 CollapsibleItem 组件。根据我个人的习惯，首先设想这个组件的使用方式，应该是这样：
按照这样的需求，先写 SimpleAccordion 的模板代码：
看起来非常简单，接下来再写 CollapsibleItem 的模板代码：
两个 slot 分别对应每个折叠项的标题跟内容。如果该项被折叠的话，那么放置 css class: item-collapse。标题容器 DIV 接收 click 事件。脚本代码：
其他部分跟 tabs 控件一样，并不难理解，需要注意的是 click 方法，这个方法接收到鼠标点击事件后，在分发给它的父组件，本例中父组件就是 SimpleAccordion。
再看 SimpleAccordion 的脚本代码：
在 mounted 的方法中，在所有的子项上注册事件 “itemClick”，这个事件在子组件中分发。事件处理方法 itemClick 根据需要，激活相应的项目。
这样这个控件就完成了，对应的 CSS：
来源：悠闲的水
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！
