version:element-plus 1.0.1-beta.0
<template>
<div :class="['el-divider', `el-divider--${direction}`]">
<!-- 水平方向才会显示插槽 -->
<div
v-if="$slots.default && direction !== 'vertical'"
:class="['el-divider__text', `is-${contentPosition}`]"
>
<slot></slot>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
interface IDividerProps {
direction: string
contentPosition: string
}
export default defineComponent({
name: 'ElDivider',
props: {
// 只接受两个方向
// css实现其实就是绝对定位加padding和背景色
direction: {
type: String,
default: 'horizontal',
validator(val: string): boolean {
return ['horizontal', 'vertical'].indexOf(val) !== -1
},
},
// 内容位置也只持三个值
contentPosition: {
type: String,
default: 'center',
validator(val: string): boolean {
return ['left', 'center', 'right'].indexOf(val) !== -1
},
},
},
})
</script>