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

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

组件分析组件构成部分
时间线组件构成部分可分为四部分：

时间线小圆点
时间线竖线条
时间戳
具体内容详情

如下图：

文章图片

所以针对时间线组件的需求，主要是从这四个角度去控制。一般时间线组件需求如下：
组件需求分析
关于分割线的组件，一般使用的场景需求有：

比如按照时间线正序或倒叙的展示（如：日志记录）
比如默认的时间线小圆点的样式颜色，以及可以自定义颜色（这里默认蓝色圆环）
比如也可以使用小图标替代时间线小圆点（例，使用饿了么图标）
使用了饿了么小图标，有时候还需要给图标上色
比如控制时间戳和具体内容详情的位置（这里默认时间戳在上方，有时候时间戳可能在下方）
有的时候，可能不需要展示时间戳，只需要展示内容，所以要再加一个是否隐藏时间戳的变量

关于官方组件的个人看法：
1.官方组件的provide和inject可以拿掉，如下图：

文章图片

2.官方组件控制时间戳位置用了两份dom，可以更改为一份dom搭配弹性盒方向控制

文章图片

3.参考各方对仿写封装组件做一个简约的处理

文章图片

【elementui源码学习之仿写一个el-timeline】大家可以看一下antd和iview的时间线组件，参数的确是比饿了么的时间线组件少一些。
antd：https://ant.design/components...
iview：https://www.iviewui.com/view-...

个人观点不一定对，仅供参考

组件中回顾知识点温故而知新
this.$slots.default.reverse()
默认插槽数组this.$slots.default，也是数组，所以也是可以使用数组的方法的。
这里控制时间线的正序倒叙就是使用了，这个方法
:style中写四元表达式
冒号style其实也是可以写三元、或者四元或者更多元的，包含变量的表达式，如下：

大意：通过:style给class为dots的dom元素设置border边框样式，具体边框的值取决于elementIcon和borderColor这两个变量的值。
代码演示的话，直接复制粘贴即可使用。当然完整的代码在github上哦^_^
我们先看一下效果图，再看一下代码
效果图

文章图片

使用组件代码

myTimeline代码

.my-timeline, .my-timeline .timeLineItem { list-style: none; } // 把最后一条竖向时间线隐藏 .my-timeline .timeLineItem:last-child .verticalLine { display: none; }

myTimelineItem代码

.timeLineItem { position: relative; // 定位控制时间线和小圆点的位置细节 padding-bottom: 12px; .verticalLine { width: 2px; height: 100%; background-color: #e9e9e9; // 定位控制 position: absolute; top: 4px; } .dots { width: 12px; height: 12px; background-color: #fff; border-radius: 50%; // 通过定位将小圆点移动到左侧时间线上方 position: absolute; left: -5px; top: 4px; i { position: absolute; left: -2px; top: -2px; } } .content { padding-left: 24px; display: flex; // 通过弹性盒方向控制contentTime和contentDetail的上下位置(默认时间在上方) flex-direction: column; .contentTime { margin-bottom: 6px; font-size: 13px; color: #666; } .contentDetail { margin-bottom: 6px; font-size: 14px; color: #333; } } // 是否让时间在下方，取决于是否timeLocation的值是否为down .isSetTimeDown { flex-direction: column-reverse; } }