Typography 排版

简介

一组文本排版组件：co-typography-title 标题、co-typography-text 行内文本、co-typography-paragraph 段落，以及不限定标签的 co-typography。支持语义色、禁用、加粗/斜体/下划线/删除线/标记底色/行内代码、一键复制，以及按行数省略——真的超出时才加省略号，expandable 还能就地展开看全文。

代码演示

基础使用

co-typography-text 渲染 <span>，适合行内混排；co-typography-paragraph 渲染 <div>，适合成段文字。type 给语义色，disabled 置灰不可选。

<template>
  <div class="stack">
    <co-typography-paragraph>
      普通正文，用
      <co-typography-text strong>加粗</co-typography-text>
      或
      <co-typography-text type="secondary">次要信息</co-typography-text>
      这类行内样式。
    </co-typography-paragraph>

    <co-typography-paragraph type="secondary">次要文本（type="secondary"）</co-typography-paragraph>
    <co-typography-paragraph type="success">成功文本（type="success"）</co-typography-paragraph>
    <co-typography-paragraph type="warning">警告文本（type="warning"）</co-typography-paragraph>
    <co-typography-paragraph type="danger">错误文本（type="danger"）</co-typography-paragraph>
    <co-typography-paragraph disabled>禁用文本（disabled）</co-typography-paragraph>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
</style>

标题

co-typography-title 用 level 切换 h1–h5，字号与行高按级别走，元素标签也是对应的标题标签。

<template>
  <div class="stack">
    <co-typography-title :level="1">一级标题 h1</co-typography-title>
    <co-typography-title :level="2">二级标题 h2</co-typography-title>
    <co-typography-title :level="3">三级标题 h3</co-typography-title>
    <co-typography-title :level="4">四级标题 h4</co-typography-title>
    <co-typography-title :level="5">五级标题 h5</co-typography-title>
    <co-typography-title :level="3" type="secondary">带语义色的标题</co-typography-title>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
</style>

文本样式

mark、code、underline、delete、strong、italic 可以任意组合。

<template>
  <co-typography-paragraph>
    <co-typography-text mark>标记底色</co-typography-text>
    、
    <co-typography-text code>inline code</co-typography-text>
    、
    <co-typography-text underline>下划线</co-typography-text>
    、
    <co-typography-text delete>删除线</co-typography-text>
    、
    <co-typography-text strong>加粗</co-typography-text>
    、
    <co-typography-text italic>斜体</co-typography-text>
  </co-typography-paragraph>
</template>

一键复制

copyable 在文本后面加一个复制按钮，文案来自 text 或默认插槽里的纯文本；和省略一起用时，按钮排在省略号/展开按钮后面。

<template>
  <div class="stack">
    <co-typography-text copyable>订单号：SO-2025-1024-0001</co-typography-text>

    <co-typography-paragraph copyable :text="text" :ellipsis="{ rows: 2 }" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const text = ref(
  '大江东去，浪淘尽，千古风流人物。故垒西边，人道是：三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。',
);
</script>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
}
</style>

按行数省略

ellipsis 传对象时按 rows 限制行数：组件会算出最后一行能放多少字，把「…展开」直接接在省略号后面，不额外占一行；expandable 展开后「收起」跟在正文末尾，内容不再截断。

<template>
  <div class="stack">
    <div class="block">
      <p class="label">短文本：没超过行数，不加省略号</p>
      <co-typography-paragraph text="这一行放得下，不会被省略。" :ellipsis="{ rows: 3 }" />
    </div>

    <div class="block">
      <p class="label">长文本：超过 3 行被省略，末尾接「…展开」</p>
      <co-typography-paragraph
        :text="text"
        :ellipsis="{ rows: 3, expandable: true }"
        @expand-change="onExpandChange"
      />
      <p class="state">当前状态：{{ expanded ? '已展开' : '已收起' }}</p>
    </div>

    <div class="block">
      <p class="label">同时开复制：按钮排在展开按钮右边</p>
      <co-typography-paragraph copyable :text="text" :ellipsis="{ rows: 2, expandable: true }" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const text = ref(
  '大江东去，浪淘尽，千古风流人物。故垒西边，人道是：三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。',
);

const expanded = ref(false);

const onExpandChange = (value: boolean) => {
  expanded.value = value;
};
</script>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.block {
  max-width: 320px;
}

.label {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.state {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>

省略号位置

symbolPosition 控制省略号出现在开头、中间还是结尾：路径/文件名用 head（保留尾部），长 ID 用 middle（头尾各留一半），默认 tail。三个位置都可以配合 expandable，被省略时点「展开」看全文。

<template>
  <div class="stack">
    <div class="block">
      <p class="label">结尾（默认）</p>
      <co-typography-paragraph :text="path" :ellipsis="{ rows: 1, expandable: true }" />
    </div>

    <div class="block">
      <p class="label">开头：保留结尾，适合路径、文件名</p>
      <co-typography-paragraph
        :text="path"
        :ellipsis="{ rows: 1, symbolPosition: 'head', expandable: true }"
      />
    </div>

    <div class="block">
      <p class="label">中间：头尾各留一半，适合长 ID、版本号</p>
      <co-typography-paragraph
        :text="serial"
        :ellipsis="{ rows: 1, symbolPosition: 'middle', expandable: true }"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const path = ref(
  '/Users/example/projects/design-system/packages/components/src/typography/index.tsx',
);

const serial = ref('SO-2025-1024-0001-a8f3c9d2-71be-4c0a-9f5e-2d6b8a1c4e70');
</script>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.block {
  max-width: 320px;
}

.label {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>

更多省略配置

ellipsis 为 true 表示单行省略；symbol 换省略号；expandText / collapseText 换按钮文案。同一套配置对 Text、Title、Paragraph 都生效。

<template>
  <div class="stack">
    <div class="block">
      <p class="label">
        单行省略（
        <code>ellipsis</code>
        为 true）
      </p>
      <co-typography-text :text="text" ellipsis />
    </div>

    <div class="block">
      <p class="label">
        自定义省略号（
        <code>symbol</code>
        ）
      </p>
      <co-typography-paragraph :text="text" :ellipsis="{ rows: 2, symbol: '……' }" />
    </div>

    <div class="block">
      <p class="label">
        自定义按钮文案（
        <code>expand-text</code>
        /
        <code>collapse-text</code>
        ）
      </p>
      <co-typography-paragraph
        :text="text"
        :ellipsis="{ rows: 2, expandable: true, expandText: '展开全文', collapseText: '收起来' }"
      />
    </div>

    <div class="block">
      <p class="label">
        挂到标题上（
        <code>level</code>
        仍生效）
      </p>
      <co-typography-title :level="5" :text="text" :ellipsis="{ rows: 2, expandable: true }" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const text = ref(
  '大江东去，浪淘尽，千古风流人物。故垒西边，人道是：三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。',
);
</script>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.block {
  max-width: 320px;
}

.label {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>

API

TypographyProps

属性	描述	类型	默认值
text	文本内容（也可用默认插槽）	string	-
type	语义色	secondary | success | warning | danger	-
disabled	禁用态（置灰、不可选）	boolean	false
mark	标记底色	boolean	false
code	行内代码样式	boolean	false
underline	下划线	boolean	false
delete	删除线	boolean	false
strong	加粗	boolean	false
italic	斜体	boolean	false
copyable	显示复制按钮	boolean	false
ellipsis	true 单行省略，或传省略配置	boolean | TypographyEllipsisConfig	-

TypographyTitleProps

属性	描述	类型	默认值
level	标题级别 1-5	number	1

TypographyParagraphProps

属性	描述	类型	默认值
tag	根元素标签	string	div

其余属性继承 TypographyProps。

TypographyEllipsisConfig

属性	描述	类型	默认值
rows	最多显示几行	number	3
expandable	被省略时可展开	boolean	false
symbol	省略号字符	string	…
symbolPosition	省略号位置：head / middle / tail	string	tail
expandText	展开按钮文案	string	-
collapseText	收起按钮文案	string	-

用默认插槽放自定义内容时无法按字符裁剪，会退回 CSS 的行数截断，展开按钮也会落到下一行；需要完整的省略能力时请用 text。

TypographyEmits

事件	描述	类型
truncate-change	文本是否被省略发生变化	(truncated: boolean) => void
expand-change	展开状态发生变化	(expanded: boolean) => void

TypographySlots

插槽	描述	属性
default	文本内容	-