VUE实战5：手风琴式折叠组件（Accordion）管理后台Admin界面

作为一个有目标的人（目标是做一个好用的Bootstrap可视化编辑器，第一个版本已经实现，demo地址：https:///vular.cn/rxeditor/，代码地址：https://github.com/vularsoft/...)，工作比较活跃，思维比较活跃，睡眠相对较少。我今天早上6:30起床。早餐前，我实现了一个手风琴式的折叠组件。具体效果如下：一般情况下，此类控件有两种表现形式：1.独占展开，即一次只展开一项。其他的都是关闭的，类似于QQ好友群。2.随意展开，不拍照，可以同时展开多个item只实现第二种方法，比较简单，每个子item可以控制自己的状态，不需要和其他item交互。我的目标是做一个控件，两种方式都支持，属性参数multiple决定是否可以同时展开多个。添加新的文件和目录：和上一个Tabs控件的实现一样，有一个公共的子组件：CollapsibleItem，基于它实现了折叠组件：SimpleAccordion。如果以后想实现其他样式的折叠组件，可以共享CollapsibleItem组件。按照我个人的习惯，先想象一下这个组件怎么用，应该是这样的：....标题2内容2....关注这个需求，先写SimpleAccordion的模板代码：CollapsibleItem:两个slot分别对应每个折叠项目的标题和内容。如果项目折叠，则放置css类：项目折叠。标头容器DIV接收点击事件。脚本代码：exportdefault{name:'CollapsibleItem',props:{selected:{default:false}},data(){return{isActive:false};},方法:{click(){this.$emit('itemClick',this)}},mounted(){this.isActive=this.selected;}}其他部分和tabs控件一样，理解起来也不难。您需要注意的是点击方法。该方法接收到鼠标点击事件后，分发给它的父组件，本例父组件为SimpleAccordion。再看SimpleAccordion的脚本代码：=this.$children},mounted(){this.items.forEach(item=>{item.$on('itemClick',this.itemClick)})},方法：{itemClick(clickedItem){clickedItem.isActive=!clickedItem.isActiveif(!this.multiple){this.items.forEach(item=>{if(item!==clickedItem){item.isActive=false}})}}}}在挂载方法中，在所有在子项上注册了事件“itemClick”，该事件在子组件中分发。事件处理程序方法itemClick根据需要激活相应的项目。这样这个控件就完成了，对应的CSS：.simple-accordion{flex:1;宽度：100%；溢出：自动；高度：0；显示：弹性；弹性流：列；边距顶部：2px；}.simple-accordion.collapsible-item{显示：flex；弹性流：列；宽度：100%；}.simple-accordion.item-heading{显示：flex;弹性流：行；弹性包装：包装；对齐项目：居中；字体大小：12px；颜色：#f0f1ef；左填充：10px；填充顶部：10px；填充底部：10px；填充右：20px；位置：相对；border-top:#484848solid1px;border-bottom:#282828solid1px;游标：默认；}.simple-accordion.item-heading:hover{背景：#383838;}.simple-accordion.collapsible-item.item-headingspan{margin-right:5px;}.simple-accordion.collapsible-item.item-headingsmall{white-space:nowrap;颜色：#aaa；字体大小：11px；}.simple-accordion.collapsible-item.item-heading::after{位置：绝对;内容：'';宽度：0；高度：0；顶部：计算（50%-1px）；右：19px；边框宽度：4px；边框样式：实心；边框颜色：#f0f1ef透明透明透明；}.simple-accordion.item-body{border-top:#282828solid1px;填充：10px；}.simple-accordion.collapsible-item.item-collapse.item-heading::after{position:absolute;内容：'';宽度：0；高度：0；顶部：计算（50%-1px）；右：17px；边框宽度：4px；边框样式：实心；边框颜色：透明透明透明#f0f1ef；}.simple-accordion.collapsible-item.item-collapse.item-body{显示：无；}.simple-accordion.item-body.element{-webkit-user-select:none;-moz-用户选择：无；-ms-用户选择：无；用户选择：无；光标：移动；颜色：#c2c2c2；字体大小：13px；填充：5px5px；边距：3px；显示：弹性；弹性流：行；证明内容：间隔；对齐项目：居中；}.simple-accordion.item-body.element:hover{颜色：#75b325;盒子阴影：2px2px5px0pxrgba(0,0,0,0.4);}do在使用这个控件的时候，遇到了一些小问题，调整了项目的CSS。比较重要的几点如下：1.拖动窗口时，拖动手柄会被挤出。添加：flex-shrink到句柄的CCS：0；这可以防止手柄被挤压。2.如果SimpleAccordion的宽度设置为100%，会展开父组件WidgetTabs，失去拖拽效果。后来查到WidgetTabs的父元素没有设置宽度，从widgettabs到fixed父容器的宽度，都设置了宽度为100%：.left-inner{width:100%;}.top-area{width:100%;}3.用于显示开合箭头，使用css绘制，具体绘制原理请自行百度。整个项目在这个历史节点的代码，请到我的Github查看：https://github.com/vularsoft/studio-ui