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

目录

• 正文
• 组件需求分析
• 组件中用到的知识点
• 函数式组件
• 函数式组件的两种定义方式
• 解决一像素太粗的问题
• 组件封装
• 组件封装的效果图
• 组件封装的代码

正文

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

github仓库地址如下：github.com/shuirongshu…

组件需求分析

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

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

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

组件中用到的知识点

函数式组件

我们知道，一个函数，其实就是一个加工流水线，我们入参，经过函数的加工以后，得到return加工后的结果。

对于组件而言，其实也可以当做一个函数（函数式组件），我们传递参数，组件props接收，然后组件再根据传参的不同，渲染出对应的样式效果。

这种方式和原来的我们使用组件的方式其实差不多，只不过更加精简，毕竟只考虑接收参数，没有生命周期、this实例之类的。所以函数式组件的渲染效率会比普通组件高。

所以有些情况下，使用函数式组件效率会更高

函数式组件的两种定义方式

比如，通过传参方式去渲染文字，可以有以下两种方式

方式一：render函数定义

方式二：template定义

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

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

故：为了提升渲染效率，这里使用函数式组件

使用函数式组件的情况大致有以下：

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

解决一像素太粗的问题

先看一下问题图

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

transform: scaleY(0.95); 或 transform: scaleX(0.95);

组件封装

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

组件封装的效果图

组件封装的代码

使用的代码

封装的代码

以上就是elementui源码学习之仿写一个el-divider组件的详细内容，更多关于elementui仿写el-divider的资料请关注脚本之家其它相关文章！