2020-07-27 23:22:31 +08:00
|
|
|
<template>
|
|
|
|
<div
|
|
|
|
v-bind="$attrs"
|
|
|
|
: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">
|
2020-07-29 20:18:18 +08:00
|
|
|
import { defineComponent } from 'vue'
|
|
|
|
|
|
|
|
interface IDividerProps {
|
2020-08-02 15:27:24 +08:00
|
|
|
direction: string;
|
|
|
|
contentPosition: string;
|
2020-07-29 20:18:18 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default defineComponent({
|
2020-07-27 23:22:31 +08:00
|
|
|
name: 'ElDivider',
|
|
|
|
props: {
|
|
|
|
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
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2020-07-29 20:18:18 +08:00
|
|
|
})
|
2020-07-27 23:22:31 +08:00
|
|
|
</script>
|