element-ui中的el-collapse分析

1.改变el-collapse的样式

这里改变了el-collpase的背景颜色

.el-collapse >>> .el-collapse-item
  background-color: #e9eef3 !important
.el-collapse-item >>> .el-collapse-item__header
  background-color: #e9eef3 !important
.el-collapse-item >>> .el-collapse-item__wrap
  background-color: #e9eef3 !important

原理：
.el-collpase
首先可以看到el-collapse是最外层的包裹

图片.png

.el-collapse-item
然后发现el-collpase-item负责了每一块的背景颜色

图片.png

可是光改变el-collapse的背景颜色并没有效果
.el-collapse-item__wrap
.el-collapse-item__header

图片.png

图片.png

头部部分拉开覆盖了头部部分的模块，会发现有个模块含有了类名

图片.png

2.改变分隔线

.el-collpase里有个属性负责整个展开版的上下分隔线

图片.png

wrap里有每个区域的下分隔线

图片.png

但是修改后并没有效果

图片.png

原来是展开后的下分隔线

图片.png

未展开的下分隔线在header那

图片.png

可是修改后header的分隔线不消失

图片.png

发现element-ui使用了is-active（.el-collapse-item__header.is-active）来控制

图片.png

最终效果完成：

图片.png

总结：
可以发现，这里修改的属性全在header和wrap里，那么collapse组件也就是
未展开前：header
展开后：header和wrap控制
展开和未展开的样式变化：is-active