UseLineTitle - 线条标题

组件介绍

UseLineTitle 是基于 Vue3 + TypeScript 封装的线条标题组件，专注于为页面区块、表单分组、卡片头部等场景提供开箱即用的标题装饰样式，内置左侧竖线、底部下划线、两侧分隔线三种主流标题样式，完整支持自定义字体、颜色、边距、边框等样式属性，自动适配项目主题色，可直接替换手写标题样式，大幅降低标题场景的重复CSS开发成本。

核心能力

三种内置装饰线模式

内置三种常用标题装饰样式：left（左侧竖线，默认模式）、bottom（底部下划线）、between（两侧居中分隔线），不同模式内置默认padding、线条尺寸配置，无需手动编写CSS即可快速实现绝大多数场景的标题视觉效果，将line.position设置为对应值即可一键切换样式。

标准化的扩展配置体系

通过extConfig统一管理线条、外边距、底部边框等扩展样式配置，所有扩展配置遵循「组件局部配置 > 全局默认配置 > 内置默认值」优先级规则，组件传入的extConfig优先覆盖defaultExtConfig中的默认配置，未配置时自动兜底，兼顾项目全局样式统一与局部场景灵活调整。

灵活的间距与边框控制

内置上下外边距独立配置，默认提供底部20px间距适配中后台页面常规布局；支持开启底部全宽分隔边框，可自定义边框颜色、底部内边距，满足卡片头部、区块分隔、列表标题等需要底部分隔线的场景需求。

富文本与自定义样式支持

标题内容支持v-html渲染富文本，可直接传入带HTML标签的标题内容；支持自定义字体大小（默认18px）、字体颜色、自定义样式类名，满足不同层级标题、特殊样式标题的个性化需求，适配各种设计规范。

主题色自动适配

默认装饰线颜色使用项目主题色CSS变量var(--theme-color)，底部边框默认使用Element Plus官方浅色边框变量var(--el-border-color-light)，无需手动配置颜色即可自动适配项目主题切换、暗黑模式等场景，保持全系统视觉一致性。

样式隔离与轻量实现

组件样式通过scoped作用域隔离，避免全局样式污染；无任何第三方依赖，仅基于Vue3与SCSS实现，使用v-bind动态绑定样式实现配置与视图的联动，组件体积轻量，渲染性能优异，无额外运行时开销。

API简洁易上手

核心属性与扩展配置分离设计：核心属性（title、fontSize、color、class）覆盖90%基础使用场景，仅需传入title即可快速生成标准标题；扩展配置（extConfig）开放深度样式定制能力，API语义清晰，学习成本极低。

全场景适配能力

默认样式适配中后台系统绝大多数标题场景：表单分组标题、卡片头部标题、页面区块标题、弹窗/抽屉头部标题、列表模块标题等，通过简单配置调整即可快速适配不同设计风格的标题需求，无需重复编写冗余CSS代码。

使用

UseLineTitle

Props

import type { PropType } from 'vue'
import type { ExtConfig } from './types'

/**
 * 组件props
 */
export default {
  /**
   * 标题名称 必传
   */
  title: {
    type: String,
    required: true
  },
  /**
   * 字体大小
   */
  fontSize: {
    type: String,
    default: '18px'
  },
  /**
   * 标题颜色
   */
  color: {
    type: String,
    default: ''
  },
  /**
   * 样式类名
   */
  class: {
    type: String,
    default: ''
  },
  /**
   * 扩展配置 如【外边距/线条/底部border】等
   */
  extConfig: {
    type: Object as PropType<ExtConfig>,
    default: () => ({})
  }
}

Types

import type { ExtractPropTypes } from 'vue'
import componentProps from './props'

/**
 * props类型
 */
export type Props = ExtractPropTypes<typeof componentProps>

/**
 * 线条接口
 */
export interface Line {
  /** 作用于position为left和bottom */
  width: string
  /** 作用于position为between */
  height: string
  color: string
  position: 'left' | 'bottom' | 'between'
  verticalPadding: string
}

/**
 * 外边距接口
 */
export interface Margin {
  top: string
  bottom: string
}

/**
 * 底部border接口
 */
export interface BorderBottom {
  show: boolean
  color: string
  paddingBottom: string
}

/**
 * extConfig接口
 */
export interface ExtConfig {
  line: Line
  margin: Margin
  borderBottom: BorderBottom
}

DefaultExtConfig

import type { ExtConfig } from './types'

/**
 * 默认扩展配置
 */
export default {
  margin: { top: '0px', bottom: '20px' },
  line: {
    width: '4px',
    height: '2px',
    color: 'var(--theme-color,var(--el-color-primary))',
    position: 'left',
    verticalPadding: '0px'
  },
  borderBottom: {
    show: false,
    color: 'var(--el-border-color-light)',
    paddingBottom: '20px'
  }
} satisfies ExtConfig

UseLineTitle - 线条标题 ​

组件介绍 ​

核心能力 ​

使用 ​

Props ​

Types ​

DefaultExtConfig ​

UseLineTitle - 线条标题

组件介绍

核心能力

使用

Props

Types

DefaultExtConfig