Tui

Text 文本

用于展示文本内容的通用组件，支持代码高亮和关键词标记功能。

通过简单的标记语法，可以快速实现内联代码高亮和关键词标记，适用于文档展示、代码示例等场景。

搭配 :deep(.text-code-demo) { .code { background: #f6f6f6; padding: 2px 6px; border-radius: 4px; font-style: italic; margin: 0 5px; color: blue; } }

基础用法

基本文本展示，支持插槽和text属性两种方式传入内容。

这是一段普通文本内容

这是通过插槽传入的文本内容

示例代码

vue

<template>
  <TsText text="这是一段普通文本内容" />
  <TsText>这是通过插槽传入的文本内容</TsText>
</template>

代码高亮

使用反引号`包裹`内容可以高亮显示代码片段，适用于展示内联代码。

在JavaScript中，使用console.log()来打印输出

CSS中设置颜色可以使用color: #ff0000或color: red

示例代码

vue

<template>
  <TsText>在JavaScript中，使用`console.log()`来打印输出</TsText>
  <TsText>CSS中设置颜色可以使用`color: #ff0000`或`color: red`</TsText>
</template>

代码模式

设置mode="code"可以启用代码模式，该模式下会解析并高亮所有代码片段。

在Vue组件中，使用defineProps定义props，例如： const props = defineProps({ name: String, age: Number })

示例代码

vue

<template>
  <TsText mode="code">
    在Vue组件中，使用 `defineProps`定义 `props`，例如：
    const props = defineProps({ name: String, age: Number })
  </TsText>
</template>

空格处理

通过trim和codeTrim属性控制文本中空格的显示方式。

默认情况（保留空格）:

这段文本中的多个空格会被保留

启用 trim（删除所有空格）:

这段文本中的所有空格都会被删除

启用 codeTrim（保留代码片段两侧的空格）:

代码片段 `const name = 'value'` 中的两侧空格会被保留

示例代码

vue

<template>
  <div>
    <p>默认情况（保留空格）:</p>
    <TsText>这段文本中的    多个空格    会被保留</TsText>
  </div>
  <div>
    <p>启用trim（删除所有空格）:</p>
    <TsText :trim="true">这段文本中的    所有空格    都会被删除</TsText>
  </div>
  <div>
    <p>启用codeTrim（保留代码片段两侧的空格）:</p>
    <TsText :code-trim="false">代码片段`const  name  =  'value'`中的两侧空格会被保留</TsText>
  </div>
</template>

属性 Props

text

文本内容

string

空字符串

mode

显示模式，code：代码模式，会对文本中的 `code` 进行高亮

"default" | "code"

"default"

codeTrim

是否删除代码片段两边的空格

boolean

false

trim

是否删除所有空格

boolean

false

插槽 Slots

default

默认插槽，用于传入文本内容