Elementui源码学习仿el-timeline

.my-timeline,.my-timeline.timeLineItem{list-style:none;}//隐藏最后一条垂直时间线.my-timeline.timeLineItem:last-child.verticalLine{display:none;}本文记录仿el-timeline组件的细节，帮助大家更好的理解饿了么UI对应组件的具体工作细节。本文是elementui源码学习模仿系列的另一篇文章，有空会持续更新模仿其他组件。源码在github上，大家可以拉下来，npmstart运行，结合注释帮助大家更好的理解。github仓库地址如下：github.com/shuirongshu...组件分析组件组件时间轴组件组件可以分为四个部分：timelinesmalldotstimelineverticallinestimestamp具体内容详情如下：soforthetimeline组件需求主要从这四个角度来控制。一般的时间线组件需求如下：组件需求分析关于分界线的组件，一般使用的场景需求包括：比如按照时间线顺序或者倒序展示（比如：日志记录），比如默认时间线点的样式和颜色，你可以自定义颜色（这里默认蓝色圆圈）。比如你也可以用小图标来代替时间线上的小圆点（比如用饿了么图标）。使用饿了么小图标，有时需要给图标例如控制时间戳的位置和具体的内容详情（这里默认时间戳在顶部，有时时间戳可能在底??部）。有时候可能不需要显示时间戳，只显示内容，所以加一个是否隐藏Timestamp变量个人对官方组件的看法：1.官方组件的provide和inject可以去掉，如图下图：2.官方组件使用两份dom来控制timestamp的位置，可以改成一份dom来配合弹框控件的方向3.参考各方做一个简单的仿包元器件的处理。可以看看antd和iview的timeline组件。参数确实比饿了么的时间线组件要少。antd:https://ant.design/components...iview:https://www.iviewui.com/view-...个人观点不一定正确，仅供参考。.$slots.default.reverse()默认的槽数组this.$slots.default也是一个数组，所以也可以使用数组的方式。这里用到了控制时间线的正序闪回。这种方法：在style中写一个四元表达式冒号其实style也可以写三元，或者四元或者更多的表达式，包括变量表达式，如下：