Text 文本

文本组件，用于展示文本内容、控制类型、尺寸与省略等常见操作。

import { createApp } from 'vue'
import { Text as ElText } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElText)

基础用法

通过 type 属性控制文本的语义类型，可选值为 primary、success、warning、danger、info。

<template>
  <div class="demo-text">
    <el-text type="primary">Primary Text</el-text>
    <el-text type="success">Success Text</el-text>
    <el-text type="warning">Warning Text</el-text>
    <el-text type="danger">Danger Text</el-text>
    <el-text type="info">Info Text</el-text>
    <el-text>Default Text</el-text>
  </div>
</template>

<script lang="ts" setup>
import { Text as ElText } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-text {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
</style>

尺寸

使用 size 属性控制文本尺寸，可选 large、default、small。

<template>
  <div class="demo-col">
    <el-text size="large">Large Text</el-text>
    <el-text>Default Text</el-text>
    <el-text size="small">Small Text</el-text>
  </div>
</template>

<script lang="ts" setup>
import { Text as ElText } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

省略

通过 truncated 属性在超出容器宽度时显示省略号；通过 line-clamp 控制多行省略。

<template>
  <div class="demo-col">
    <div style="width: 160px;">
      <el-text truncated>Self element set width 100px but the content is too long to display.</el-text>
    </div>
    <el-text truncated style="max-width: 280px;">Squeezed by parent element — the content will be truncated with an ellipsis.</el-text>
    <el-text line-clamp="2" style="max-width: 320px;">
      The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines.
    </el-text>
  </div>
</template>

<script lang="ts" setup>
import { Text as ElText } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

覆盖

tag 属性可自定义渲染的 HTML 标签，用于在语义上替换默认的 <span>。

<template>
  <div class="demo-col">
    <el-text tag="p">This is a paragraph.</el-text>
    <el-text tag="b">Bold</el-text>
    <el-text tag="i">Italic</el-text>
    <el-text tag="sub">This is subscript</el-text>
    <el-text tag="sup">This is superscript</el-text>
    <el-text tag="ins">Inserted</el-text>
    <el-text tag="del">Deleted</el-text>
    <el-text tag="mark">Marked</el-text>
  </div>
</template>

<script lang="ts" setup>
import { Text as ElText } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
</style>

混合使用

Text 可与 Link、Rate、Icon 等组件混合使用，保持一致的排版节奏。

<template>
  <div class="demo-row">
    <el-text>
      <el-link type="primary">Element Plus</el-link>
    </el-text>
    <el-text>
      <el-rate :model-value="4" disabled />
    </el-text>
    <el-text>
      This is text mixed
      <el-icon color="var(--el-color-primary)"><Star /></el-icon>
      icon and component
    </el-text>
  </div>
</template>

<script lang="ts" setup>
import { Text as ElText, Link as ElLink, Rate as ElRate, Icon as ElIcon } from '@szhn/dh-design-pc'
import { Star } from '@szhn/dh-design-pc/icons'

</script>

<style scoped>
.demo-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
</style>

API

Attributes

属性名	说明	类型	默认值
type	类型	primary / success / warning / danger / info	—
size	大小	large / default / small	default
truncated	显示省略号	boolean	false
line-clamp	最大行数	string / number	—
tag	自定义元素标签	string	span

Slots

名称	说明
default	默认内容

完整 API 参考 Element Plus Text。