Vue3分割线（Divider）

可自定义设置以下属性分割线标题的位置orientation类型left | center | right默认 center标题和最近 left/right 边框之间的距离去除了分割线同时 orientation 必须为 left 或 rightdisabled类型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其中引入使用了以下工具函数监听插槽存在 useSlotsExistscript setup langts import { computed } from vue import { useSlotsExist } from components/utils export 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(definePropsProps(), { orientation: center, orientationMargin: undefined, borderWidth: 1, borderStyle: solid, borderColor: rgba(5, 5, 5, 0.06), vertical: false, height: 0.9em }) const slotsExist useSlotsExist([default]) 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 showText computed(() { return slotsExist.default }) /script template div classdivider-wrap :class[ vertical ? divider-vertical : 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 v-ifshowText classdivider-text slot/slot /span /div /template style langless scoped .divider-wrap { color: rgba(0, 0, 0, 0.88); font-size: 14px; line-height: 1.5714285714285714; border-top: var(--border-width) var(--border-style) var(--border-color); .divider-text { display: inline-block; padding: 0 1em; } } .divider-horizontal { display: flex; clear: both; width: 100%; min-width: 100%; margin: 24px 0; } .divider-vertical { position: relative; top: -0.06em; display: inline-block; height: var(--line-height); margin: 0 8px; vertical-align: middle; border-top: 0; border-left: var(--border-width) var(--border-style) var(--border-color); } .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-top: 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-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%; } .divider-text { margin-left: var(--margin); padding-left: 0; } } .divider-orientation-margin-right { ::before { width: 100%; } ::after { width: 0; } .divider-text { margin-right: var(--margin); padding-right: 0; } } /style②在要使用的页面引入script setup langts import Divider from ./Divider.vue /script template div h1{{ $route.name }} {{ $route.meta.title }}/h1 h2 classmt30 mb10基本使用/h2 DividerCenter Text/Divider Divider border-styledashedCenter Text/Divider h2 classmt30 mb10中间无文字/h2 Divider / Divider border-styledashed / h2 classmt30 mb10指定文字位置/h2 DividerCenter Text/Divider Divider orientationleftLeft Text/Divider Divider orientationrightRight Text/Divider h2 classmt30 mb10自定义文字边距/h2 h3 classmb10文字居左(右)并距左(右)边 120px/h3 Divider orientationleft :orientation-margin120Left Text/Divider Divider orientationright :orientation-margin120Right Text/Divider h2 classmt30 mb10垂直分割线/h2 div Text Divider vertical / a href#Link/a Divider vertical / a href#Link/a /div h2 classmt30 mb10自定义垂直线高度/h2 Divider vertical :border-width3 :height60 / Divider vertical :border-width3 :height60 border-styledashed / Divider vertical :border-width3 :height60 border-styledotted / h2 classmt30 mb10自定义样式/h2 Divider :border-width3 border-colororange / Divider :border-width3 border-styledashed border-colororange / Divider :border-width3 border-styledotted border-colororange / Flex styleheight: 120px Divider vertical :border-width3 border-colororange heightauto / Divider vertical :border-width3 border-styledashed border-colororange :height120 / Divider vertical :border-width3 border-styledotted border-colororange height100% / /Flex /div /template