今天项目需求需要用到el-divider,但不满足需求,所以今天封装了一个基于el-divider且更强大的展示模式 哈哈哈 请客观cv
@/components/Divider/index
<template>
<div class="divider--horizontal">
<div class="divider__text is-center" :style="{color}">
<slot name="center"></slot>
</div>
<div class="divider__text is-right">
<slot name="right"></slot>
</div>
</div>
</template>
<script setup>
const props = defineProps({
color: {
type: String,
default: '#a8a8a8'
}
})
</script>
<style scoped lang="scss">
.divider--horizontal {
display: block;
height: 1px;
width: 100%;
margin: 24px 0;
border-top: 1px solid #dcdfe6;
.divider__text {
position: absolute;
background-color: #ffffff;
padding: 0 20px;
font-weight: 500;
color: #303133;
font-size: 14px;
}
.is-center {
left: 50%;
transform: translate(-50%) translateY(-50%);
}
.is-right {
right: 20px;
transform: translateY(-50%);
}
}
</style>
调用组件方法
import Divider from '@/components/Divider'
可接受中间且左侧文字展示
<Divider>
<template v-slot:center>
中间
</template>
<template v-slot:right>
左侧
</template>
</Divider>