打造自己的UI库--分割线篇

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

大体就是：

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

定义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的class classes() { return [ `${prefixCls}