Vue3分割线（Divider）

可自定义设置以下属性：

• 分割线标题的位置（orientation），类型：'left' | 'center' | 'right'，默认 'center'

• 标题和最近 left/right 边框之间的距离，去除了分割线，同时 orientation 必须为 left 或 right（disabled），类型：string | number，默认 ''

• 分割线宽度（borderWidth），单位 px，类型：number，默认 1

• 分割线样式（borderStyle），类型：'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'，默认 'solid'

• 分割线颜色（borderColor），类型：string，默认 'rgba(5, 5, 5, 0.06)'

• 是否垂直分割（vertical），类型：boolean，默认 false

• 垂直分割线高度（height），仅当 vertical: true 时生效，类型：string | number，默认 '0.9em'

效果如下图：在线预览

① 创建分割线组件Divider.vue：

<script setup lang="ts">
import { computed, useSlots } from 'vue'
interface Props {
  orientation?: 'left' | 'center' | 'right' // 分割线标题的位置
  orientationMargin?: string | number // 标题和最近 left/right 边框之间的距离，去除了分割线，同时 orientation 必须为 left 或 right
  borderWidth?: number // 分割线宽度，单位 px
  borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' // 分割线样式
  borderColor?: string // 分割线颜色
  vertical?: boolean // 是否垂直分割
  height?: string | number // 垂直分割线高度，仅当 vertical: true 时生效
}
const props = withDefaults(defineProps<Props>(), {
  orientation: 'center',
  orientationMargin: undefined,
  borderWidth: 1,
  borderStyle: 'solid',
  borderColor: 'rgba(5, 5, 5, 0.06)',
  vertical: false,
  height: '0.9em'
})
const margin = computed(() => {
  if (typeof props.orientationMargin === 'number') {
    return props.orientationMargin + 'px'
  }
  return props.orientationMargin
})
const lineHeight = computed(() => {
  if (typeof props.height === 'number') {
    return props.height + 'px'
  }
  return props.height
})
const slots = useSlots()
const showText = computed(() => {
  const defaultSlots = slots.default?.()
  if (defaultSlots) {
    return Boolean(defaultSlots[0].children !== 'v-if' && defaultSlots[0].children?.length)
  }
  return false
})
</script>
<template>
  <div
    class="m-divider divider-style"
    :class="[
      vertical ? 'm-divider-vertical' : 'm-divider-horizontal',
      {
        'divider-with-text': showText,
        'divider-with-text-center': showText && orientation === 'center',
        'divider-with-text-left': showText && orientation === 'left',
        'divider-with-text-right': showText && orientation === 'right',
        'divider-orientation-margin-left': showText && orientation === 'left' && orientationMargin !== undefined,
        'divider-orientation-margin-right': showText && orientation === 'right' && orientationMargin !== undefined
      }
    ]"
    :style="`--border-width: ${borderWidth}px; --border-style: ${borderStyle}; --border-color: ${borderColor}; --margin: ${margin}; --line-height: ${lineHeight};`"
  >
    <span class="u-divider-text" v-show="showText">
      <slot></slot>
    </span>
  </div>
</template>
<style lang="less" scoped>
.m-divider {
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  border-block-start: var(--border-width) var(--border-style) var(--border-color);
  .u-divider-text {
    display: inline-block;
    padding: 0 1em;
  }
}
.m-divider-horizontal {
  display: flex;
  clear: both;
  width: 100%;
  min-width: 100%;
  margin: 24px 0;
}
.m-divider-vertical {
  position: relative;
  top: -0.06em;
  display: inline-block;
  height: var(--line-height);
  margin: 0 8px;
  vertical-align: middle;
  border-top: 0;
  border-inline-start: var(--border-width) var(--border-style) var(--border-color);
}
.divider-style {
  background: none;
  border-color: var(--border-color);
  border-style: var(--border-style);
  border-width: var(--border-width) 0 0;
}
.m-divider-vertical.divider-style {
  border-inline-start-width: var(--border-width);
  border-inline-end: 0;
  border-block-start: 0;
  border-block-end: 0;
}
.divider-with-text {
  display: flex;
  align-items: center;
  margin: 16px 0;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  text-align: center;
  border-block-start: 0 var(--border-color);
  &::before,
  &::after {
    position: relative;
    width: 50%;
    border-top-width: var(--border-width);
    border-top-style: var(--border-style);
    border-top-color: inherit;
    transform: translateY(50%);
    content: '';
  }
}
.divider-with-text.divider-style {
  &::before,
  &::after {
    border-style: var(--border-style) none none;
  }
}
.divider-with-text-left {
  &::before {
    width: 5%;
  }
  &::after {
    width: 95%;
  }
}
.divider-with-text-right {
  &::before {
    width: 95%;
  }
  &::after {
    width: 5%;
  }
}
.divider-orientation-margin-left {
  &::before {
    width: 0;
  }
  &::after {
    width: 100%;
  }
  .u-divider-text {
    margin-left: var(--margin);
    padding-inline-start: 0;
  }
}
.divider-orientation-margin-right {
  &::before {
    width: 100%;
  }
  &::after {
    width: 0;
  }
  .u-divider-text {
    margin-right: var(--margin);
    padding-inline-end: 0;
  }
}
</style>

②在要使用的页面引入：

<script setup lang="ts">
import Divider from './Divider.vue'
</script>
<template>
  <div>
    <h1>{{ $route.name }} {{ $route.meta.title }}</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Divider>Center Text</Divider>
    <Divider border-style="dashed">Center Text</Divider>
    <h2 class="mt30 mb10">中间无文字</h2>
    <Divider />
    <Divider border-style="dashed" />
    <h2 class="mt30 mb10">指定文字位置</h2>
    <Divider>Center Text</Divider>
    <Divider orientation="left">Left Text</Divider>
    <Divider orientation="right">Right Text</Divider>
    <h2 class="mt30 mb10">垂直分割线</h2>
    <div>
      Text
      <Divider vertical />
      <a href="#">Link</a>
      <Divider vertical />
      <a href="#">Link</a>
    </div>
    <h2 class="mt30 mb10">自定义垂直线高度</h2>
    <Divider vertical :border-width="3" :height="60" />
    <Divider vertical :border-width="3" :height="60" border-style="dashed" />
    <Divider vertical :border-width="3" :height="60" border-style="dotted" />
    <h2 class="mt30 mb10">自定义文字边距</h2>
    <h3 class="mb10">文字居左(右)并距左(右)边 120px</h3>
    <Divider orientation="left" :orientation-margin="120">Left Text</Divider>
    <Divider orientation="right" :orientation-margin="120">Right Text</Divider>
    <h2 class="mt30 mb10">自定义样式</h2>
    <Divider :border-width="3" border-color="orange" />
    <Divider :border-width="3" border-style="dashed" border-color="orange" />
    <Divider :border-width="3" border-style="dotted" border-color="orange" />
    <Flex style="height: 120px">
      <Divider vertical :border-width="3" border-color="orange" height="auto" />
      <Divider vertical :border-width="3" border-style="dashed" border-color="orange" :height="120" />
      <Divider vertical :border-width="3" border-style="dotted" border-color="orange" height="100%" />
    </Flex>
  </div>
</template>