顾名思义，为了达到更好的阅读效果，合理地对内容进行分割，这就是分割线。我们来看下今天要开发的几种分割线的实际效果：

大体就是：

普通分割线
垂直分割线
文字分割线
虚线分割线
以及以上分割线的组合使用

定义props
看看我们定义了哪些props来完成以上的几个功能：
props: {
// 水平或者垂直
type: {
type: String,
default: “horizontal”
},
// 文字对齐（居左、居中、居右）
orientation: {
type: String,
default: “center”
},
// 虚线
dashed: {
type: Boolean,
default: false
},
// 大小
size: {
type: String,
default: “default”
}
}
复制代码Template
Template描述的是组件的外形结构，本组件可以分为三层，分别是：最外层的div、中间层的span、以及文字的slot

复制代码CSS类的计算 通过整合传入的props，为Template应用上相关的class，所以这部分都在computed中实现： computed: {// 判断是否传入文字hasSlot() {return !!this.$slots.default;},// 外层div的classclasses() {return [`${prefixCls}`,`${prefixCls}-${this.type}`,...];},// 中间层span的classslotClasses() {return [`${prefixCls}-inner-text`];} } 复制代码重头戏：CSS 首先看下水平或者垂直是怎么控制的： .@{divider-prefix-cls} {background: @border-color-split;&-vertical{display: inline-block;margin: 0 8px;height: 0.9em;width: 1px;vertical-align: middle;position: relative;top: -0.06em;}&-horizontal {display: block;height: 1px;width: 100%;min-width: 100%;margin: 24px 0;clear: both;} } 复制代码带有文字 .@{divider-prefix-cls} {background: @border-color-split;...&-horizontal&-with-text-center,&-horizontal&-with-text-left,&-horizontal&-with-text-right {display: table;white-space: nowrap;text-align: center;background: transparent;margin: 16px 0;font-size: 16px;&:before,&:after{content: '';display: table-cell;position: relative;top: 50%;width: 50%;border-top: 1px solid @border-color-split;transform: translateY(50%);}}... 复制代码控制文本对齐// ...&-horizontal&-with-text-left {&:before {top: 50%;width: 5%;}&:after {top: 50%;width: 95%;}}

&-horizontal&-with-text-right {&:before {top: 50%;width: 95%;}&:after {top: 50%;width: 5%;}
}
// ...

复制代码
CSS这块的代码不是很好讲解，虽然用到的都是平时常见的属性，但是能提炼到如此简洁的地步，并不是那么容易，建议大家完整地看下CSS部分的代码divider.less

http://www.kuyibu.com/product/84376609.html
http://www.kuyibu.com/product/84376608.html
http://www.kuyibu.com/product/84376606.html
http://www.kuyibu.com/product/84376604.html
http://www.kuyibu.com/product/84376599.html
更多源码
以整个的代码结构和思想来自ViewUI，真心觉得ViewUI的代码比ElementUI的容易阅读和学习（个人观点）