自定义divider-

最新推荐文章于 2025-03-28 23:18:41 发布

sauce_Yang

最新推荐文章于 2025-03-28 23:18:41 发布

阅读量458

点赞数

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/weixin_49885784/article/details/131871387

版权

今天项目需求需要用到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>