1.elementui源码学习之仿写一个el-timeline
2.elementui源码学习之仿写一个el-tag

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

       本文记录了仿写el-timeline组件的饿源细节，以深入理解饿了么UI组件的码饿实现机制。本系列文章将持续更新，源码深入探讨elementui源码的饿源方块主页导航源码学习与实践。可访问开源仓库，码饿通过npm start运行代码，源码结合注释辅助理解。饿源

       时间线组件构成包括：时间线小圆点、码饿时间线竖线条、源码时间戳与具体内容详情四个部分。饿源如图所示。码饿分块查找源码

       时间线组件主要需求包括：按时间线正序或倒序展示、源码自定义时间线小圆点样式与颜色、饿源使用小图标替代时间线小圆点、码饿控制时间戳与具体内容详情的源码位置、时间戳的laypage 分页 源码显示与隐藏。

       对官方组件的见解包括：提供与注入可以简化、时间戳位置优化、简约封装参考其他库组件。Antd与iview的时间线组件参数较为精简。

       回顾知识点：数组方法的注册推广源码使用，如this.$slots.default.reverse()；以及`:style`中的四元表达式应用，如`:style="border: ${ elementIcon} ${ borderColor}"`。

       组件代码示例如下：`myTimeline`、`myTimelineItem`。完整代码在开源仓库，源码托管 协议欢迎访问并star。

       若本文对您有所助益，期待您的star，感谢支持！

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

       本文旨在记录如何仿写el-divider组件的细节，以帮助读者更深入地理解饿了么UI中对应组件的具体工作方式。这是继之前elementui源码学习仿写系列文章之后的又一新作，未来如有空闲时间，将继续更新并仿写其他组件。相关源码已托管于github，读者可下载后通过npm start运行，并结合注释进行学习。github仓库地址为：github.com/shuirongshui...

       针对tag组件，其主要用途是展示标签信息，常见需求包括：

       饿了么官方采用的el-tag组件是通过render函数实现的，因此这里我们也采用相同的方法进行编写。整体而言，这个组件相对简单。只需注意jsx的语法即可。

       若想查看效果，可直接复制粘贴代码运行，并结合注释进行学习。最完整的代码可在github上找到。

       以下是使用代码封装组件的代码总结：