本文记录仿el-divider组件的细节,帮助大家更好的理解饿了么UI对应组件的具体工作细节。本文是elementui源码学习模仿系列的另一篇文章,有空会持续更新模仿其他组件。源码在github上,大家可以拉下来,npmstart运行,结合注释帮助大家更好的理解。github仓库地址如下:https://github.com/shuirongsh...组件需求分析关于分割线的组件,常用的场景有:分割线的水平分割(如:段落之间的分隔)水平分割线添加文字说明(文字说明的位置一般位于分割线的左、中、右)分割类型的垂直分割(横向之间的分割行内文字和正文)分割线样式类型(实线分割线或虚线分割线或虚线分割线)由于垂直分割距离不够,所以垂直分割没有文字说明。功能组件用到的知识点我们知道,一个功能其实就是一个处理流水线。我们输入参数,函数处理后,返回处理后得到结果。对于一个组件,其实可以看成是一个函数(functionalcomponent)。我们传递参数,组件props接收,然后组件根据传递的参数渲染相应的样式效果。这种方式其实和我们原来使用组件的方式类似,只是更加精简。毕竟只考虑接收参数,没有生命周期,thisinstance之类的。因此,功能组件的渲染效率会比普通组件高。所以在某些情况下,使用函数式组件会更高效两种定义函数式组件的方式比如通过传参来渲染文本,有两种方式:一:renderfunctiondefinition方法二:模板定义{{props.bookName}}
实线是向左实心
早上好solidlinesolidcentered
右边实线
左边虚线
h3>虚线居中
虚线向右虚线
点在左边
点在中间
点在右边
垂直分割线
早上好
