elementui源码学习之仿写一个el-collapse

本篇文章记录仿写一个el-collapse组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节。本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件。源码在github上，大家可以拉下来，npm start运行跑起来，结合注释有助于更好的理解。github仓库地址如下：https://github.com/shuirongsh...

组件思考

el-collapse即为折叠面板的意思，一般主要是用于：对复杂区域进行分组和隐藏，保持页面的整洁，有分类整理的意思。

collapse有折叠的意思，不过fold也有折叠的意思。所以笔者这里封装的组件就改名字了，不叫my-collapse，叫做my-fold

组件的需求

我们先看一下下图折叠组件的结构图

结合上图已经工作经验，大致分析组件的需求有以下：

• 点击折叠头部区域展开或关闭折叠内容体区域
• 展开或折叠的时候，加上过渡效果
• 头部区域的内容文字参数定义
• 是否隐藏折叠的小箭头
• 手风琴模式的折叠面板（默认是都可以展开折叠的）

组件实现之父组件统一更改所有子组件状态

一般情况下父组件更改子组件数据状态有以下方式：

1. 父组件传递数据，子组件props接收。更改父组件数据，子组件也就自动更改更新了
2. 使用this.$refs.child.xxx = yyy，给子组件打一个ref，直接更改对应值即可
3. 使用this.$children可以访问所有的子组件实例对象。所以，也可以直接更改，如下：

父组件代码

// html

// js
changeChildData() {
  // this.$children拿到所有子组件实例对象的数组，遍历访问到数据，更改之
  this.$children.forEach((child) => {
    child.flag = !child.flag;
  });
},

其中一个子组件代码，另外两个也一样

// html

// js

效果图

为什么要提到这个呢？因为手风琴模式下的折叠面板会用到这个方式去更改别的面板，使别的面板关闭

组件实现之高度过渡效果组件的封装

高度的过渡，主要是从0到某个高度，以及从某个高度到0的变化，需要搭配transition以及overflow属性去控制。我们先看一下简单的写法和效果图，再看一下封装的组件的代码

1.简单写法

伸手党福利，复制粘贴即可使用

    
    
    
    
    



    点击高度变化
    

    

    
过渡的dom
    

2.简单写法效果图

在我们封装折叠面板的时候，这个高度变化的过渡组件是必须要有的，没有的话，折叠面板展开关闭时，会有点突兀，加上一个组件，会丝滑不少。

3.折叠组件的封装

理解了上述的简单案例，再将其思路应用到组件封装中去即可

高度组件封装代码思路：

根据show变量的标识，去更改dom.style.height;初始加载时，获取初始高度`dom
.offsetHeight更改一次、当show变量标识发生变化的时候，再更改一次。同时搭配高度的transition样式控制即可（即：监听props中show`标识的变化更改之）

封装好的高度过渡组件代码如下：

另外饿了么UI也提供了el-collapse-transition组件，也是一个不错的选择

关于组件中的role属性和aria-multiselectable等

封装一套强大的开源组件其实要考虑的东西很多，比如需要适配屏幕阅读器，我们看一下饿了么UI的el-collapse组件使用到的两个屏幕阅读器属性role和aria-multiselectable。如下图：

• role属性是html中语义化标签的进一步补充（如 屏幕阅读器，给盲人使用），另举一个例子
• 高度屏幕阅读器，此处有一个复选框，而且已经被选中了
• aria-multiselectable='true'告知辅助设备，一次可以展开多个项，还是只能展开一个

详情见css大神，张鑫旭的博客文章：https://www.zhangxinxu.com/wo...

由此可以看出，一套开源的组件，的确是方方面面都要考虑到。

封装的组件

我们先看一下效果图

封装的效果图

使用自己封装的折叠组件

my-fold组件

my-fold-item组件

上述代码结合注释，更好的理解哦。当然完整版代码，在github仓库上，若能够帮到您一点点，欢迎大手一挥，给个star哦 ^_^