Title 标题

介绍

标题组件主要用于文章、列表详情等标题展示，支持自定义颜色、图标和前后缀，可配置"更多"按钮。

导入

import SubTitle from '@/components/display/title/SubTitle.vue'

用法

基础用法

基础标题展示。

<template>
  <SubTitle title="这是一个标题" />
</template>

显示更多

显示"更多"按钮并绑定点击事件。

<template>
  <SubTitle title="这是一个标题" showMore @moreClicked="toast('点击了更多')" />
</template>

自定义左侧颜色

自定义左侧标识条的颜色。

<template>
  <SubTitle title="这是一个标题" badgeColor="danger" showMore @moreClicked="toast('点击了更多')" />
</template>

自定义图标和前后缀

自定义标题的图标、前缀和后缀内容。

<template>
  <SubTitle title="这是一个标题" badgeColor="danger">
    <template #icon>
      <Icon name="arrow-right-circle" />
      <Width :width="20" />
    </template>
    <template #titleSuffix>
      <Width :width="20" />
      <Tag scheme="light" text="V1.0" type="primary" size="small" />
    </template>
  </SubTitle>
</template>

API 参考

SubTitle

标题组件，主要用于文章、列表详情等标题展示。

Props

名称	说明	类型	必填	默认值
title	标题文本	string	否	''
moreText	"更多"按钮文本	string	否	'更多'
showMore	是否显示"更多"按钮	boolean	否	false
badgeColor	左侧标识条颜色	string	否	'primary'
backgroundColor	背景颜色	string	否	-
padding	内边距	ThemePaddingMarginProp	否	[ 0, 0, 30, 0 ]
titleProps	标题文本属性	TextProps	否	-
badgeStyle	标识条样式	object	否	-

Slots

名称	说明
icon	自定义图标区域
titlePrefix	标题前缀内容
titleSuffix	标题后缀内容
right	右侧内容区域

Events

名称	说明	参数
moreClicked	点击"更多"按钮事件	$event