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

作为一个有目标的人（目标是做一个好用的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：

做这个控件时，碰到了一些细小问题，调整了项目的CSS，其中比较重要的有以下几点：

1、窗口拖动时，拖动把手会被挤没，在把手的CCS中添加：

  flex-shrink: 0;

这样可以避免handle被挤小挤没

2、SimpleAccordion宽度设为100%,他会把父组件WidgetTabs撑大，失去拖放效果。后来追踪到是WidgetTabs的父元素没有设置宽度，从widgettabs到固定宽度的父容器，全部设置宽度100%：

3、用于显示展开闭合的箭头，使用css绘制，具体绘制原理，请自行百度。

整个项目在这个历史节点的代码，请到我的Github上查看：https://github.com/vularsoft/studio-ui

找到该历史节点的方法：

RXEditor是一个Boostrap代码可视化编辑工具，本系列记录了该软件的开发过程，有问题的朋友请在ithub上给我留言。

文章知识点与官方知识档案匹配，可进一步学习相关知识Vue入门技能树Vue组件全局与局部组件23005 人正在系统学习中

来源：zhoumouren88