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

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

组件需求分析关于分割线的组件，一般使用的场景有：

分割线之水平分割（如：段落与段落之间分隔）
水平分割线加上文字描述（文字描述位置一般是位于分割线的左侧、居中、右侧）
分割类型之垂直分割（横向的行内文字与文字之间的分割）
分割线样式类型（solid分割线或dashed分割线或dotted分割线）

因为垂直分割距离不够，所以垂直分割没有文字描述

组件中用到的知识点函数式组件
我们知道，一个函数，其实就是一个加工流水线，我们入参，经过函数的加工以后，得到return加工后的结果。
对于组件而言，其实也可以当做一个函数（函数式组件），我们传递参数，组件props接收，然后组件再根据传参的不同，渲染出对应的样式效果。
这种方式和原来的我们使用组件的方式其实差不多，只不过更加精简，毕竟只考虑接收参数，没有生命周期、this实例之类的。所以函数式组件的渲染效率会比普通组件高。
所以有些情况下，使用函数式组件效率会更高
函数式组件的两种定义方式
比如，通过传参方式去渲染文字，可以有以下两种方式
方式一：render函数定义

方式二：template定义

关于函数式组件的具体细节，详情见官方文档：https://cn.vuejs.org/v2/guide...

这里为什么要提到函数式组件呢？因为el-divider组件就是使用函数式组件进行封装的（因为组件只是做分割线条的展示，所以不需要有this实例，生命周期之类的）
故：为了提升渲染效率，这里使用函数式组件
使用函数式组件的情况大致有以下：

只做展示的组件，毕竟没啥逻辑操作相关
高阶组件的操作
循环中也可以考虑使用
整体来说，函数式组件还是比较灵活的

解决一像素太粗的问题
先看一下问题图

文章图片

只需要给对应dom元素稍微缩放一下即可：

transform: scaleY(0.95);

或

transform: scaleX(0.95);

组件封装 el-divider组件整体还是比较简单的，主要是函数式组件的参数使用细节
组件封装的效果图

文章图片

组件封装的代码
使用的代码

.wrap { padding: 24px; } .staticClass_must_hava { border-bottom: 1px solid #baf !important; }

【elementui源码学习之仿写一个el-divider】封装的代码

// 水平样式 .horizontal { width: 100%; border-bottom: 1px solid #333; // 默认solid分割线样式 display: block; margin: 12px 0; position: relative; // 缩放0.85倍可以解决一像素问题（一像素看着比实际粗）横线Y缩放 transform: scaleY(0.95); } // dashed分割线 .dashed { border-bottom: 1px dashed #333; } // dotted分割线 .dotted { border-bottom: 1px dotted #333; } // 垂直样式 .vertical { display: inline-block; width: 1px; height: 1em; margin: 0 8px; background-color: #333; vertical-align: middle; position: relative; top: -1px; // 微调一下位置 // 缩放0.85倍可以解决一像素问题（一像素看着比实际粗）竖线X缩放 transform: scaleX(0.95); } // 文本样式 .text { position: absolute; padding: 0 12px; color: #333; font-size: 14px; transform: translateY(-50%); // y轴移动自身的一半，使其垂直方向居中 background-color: #fff; // 通过背景色和padding去盖住水平分割线条 } // 文本靠左 .text.left { left: 36px; } // 文本靠右 .text.right { right: 36px; } // 文本居中 .text.center { left: 50%; // 居中的话，别忘了要回正。即XY轴方向都平移自身的一半 transform: translateX(-50%) translateY(-50%); }