可自定義設(shè)置以下屬性分割線標(biāo)題的位置orientation類型left | center | right默認(rèn) center標(biāo)題和最近 left/right 邊框之間的距離去除了分割線同時 orientation 必須為 left 或 rightdisabled類型string | number默認(rèn) 分割線寬度borderWidth單位 px類型number默認(rèn) 1分割線樣式borderStyle類型solid | dashed | dotted | double | groove | ridge | inset | outset默認(rèn) solid分割線顏色borderColor類型string默認(rèn) rgba(5, 5, 5, 0.06)是否垂直分割vertical類型boolean默認(rèn) false垂直分割線高度height僅當(dāng) vertical: true 時生效類型string | number默認(rèn) 0.9em效果如下圖在線預(yù)覽① 創(chuàng)建分割線組件Divider.vue其中引入使用了以下工具函數(shù)監(jiān)聽插槽存在 useSlotsExistscript setup langts import { computed } from vue import { useSlotsExist } from components/utils export interface Props { orientation?: left | center | right // 分割線標(biāo)題的位置 orientationMargin?: string | number // 標(biāo)題和最近 left/right 邊框之間的距離去除了分割線同時 orientation 必須為 left 或 right borderWidth?: number // 分割線寬度單位 px borderStyle?: solid | dashed | dotted | double | groove | ridge | inset | outset // 分割線樣式 borderColor?: string // 分割線顏色 vertical?: boolean // 是否垂直分割 height?: string | number // 垂直分割線高度僅當(dāng) 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