TAYUN 9132174b11
docs: ✏️ 修复基础组件文档问题 - 阶段一完成 (#1220)
* docs(button): 更新按钮组件文档对开放能力的描述

- 修改 session-message-title 和 session-message-path 属性名称
- 新增 chooseavatar 和 agreeprivacyauthorization 事件回调

* docs(icon): 更新图标组件文档

- 调整属性描述,明确 name 属性可用于图标名称或图片链接
- 添加事件列表,明确 click 事件的参数
- 移除英文示例代码中不必要的示例和图标列表
- 优化文档结构和格式,使信息更加清晰

* docs(config-provider): 更新全局配置组件文档

- 调整文档中的强调样式,使用加粗替代下划线
- 完善英文文档缺失的内容,保持和中文文档一致

* docs(component): 更新 Popup 组件文档

- 调整文档结构,优化标题层级
- 添加 v-model 使用示例,明确组件绑定值
- 移除冗余的代码示例,精简文档内容
- 更新属性表格,统一属性描述
- 添加防止滚动穿透的解决方案说明

* docs(resize):  ✏️ 更新 resize 组件文档

- 修正事件名称从 `size` 改为 `resize`
- 添加组件属性(Attributes)、事件(Events)和插槽(Slots)的详细说明
- 更新文档结构,使其更加完整和易于理解

* docs(transition): ✏️完善Transition 动画组件文档的属性和事件描述

- 增加自定义根节点样式类、懒渲染、动画结束后销毁子节点等属性
- 添加进入和离开过渡的开始、激活和结束状态类
- 新增点击事件和默认插槽
- 更新文档以反映新增功能

* docs(fab): ✏️更新fab组件文档

- 优化了文档结构,调整了部分格式
- 添加了 Methods 和 default Slot 相关的信息
- 更新了 custom-style 属性的命名

* docs(component): ✏️ 更新 Text 组件文档

- 优化文档格式,调整表格结构
- 添加缺失的参数说明和示例代码
- 更新参数类型和默认值
- 增加 call 参数说明
- 补充 Slots 表格

* docs(root-portal):  ✏️ 更新组件文档

- 添加 Attributes 和 Events 部分,说明该组件无相关配置
- 修正 Slots 部分的版本信息,统一为 1.11.0
- 更新中文和英文文档
2025-08-17 14:08:48 +08:00

6.7 KiB

Text 文本

文本组件,用于展示文本信息。

1.3.4 版本提供

基本用法

设置 text 设置文本内容。推荐您使用:text='value'的形式。

<wd-text
  text="芦叶满汀洲,寒沙带浅流。二十年重过南楼。柳下系船犹未稳,能几日,又中秋。黄鹤断矶头,故人曾到否?旧江山浑是新愁。欲买桂花同载酒,终不似,少年游。"
></wd-text>

设置主题

通过type参数设置文本主题,我们提供了五类属性:primary error success warning default-默认

<wd-text type="primary" text="主色"></wd-text>
<wd-text type="error" text="错误"></wd-text>
<wd-text type="success" text="成功"></wd-text>
<wd-text type="warning" text="警告"></wd-text>
<wd-text text="默认"></wd-text>

自定义字体颜色

设置 color 属性。

<wd-text
  text="芦叶满汀洲,寒沙带浅流。二十年重过南楼。柳下系船犹未稳,能几日,又中秋。黄鹤断矶头,故人曾到否?旧江山浑是新愁。欲买桂花同载酒,终不似,少年游。"
  color="#36B8C2"
></wd-text>

是否粗体

设置 bold 属性。

<wd-text
  text="芦叶满汀洲,寒沙带浅流。二十年重过南楼。柳下系船犹未稳,能几日,又中秋。黄鹤断矶头,故人曾到否?旧江山浑是新愁。欲买桂花同载酒,终不似,少年游。"
  bold
></wd-text>

字体大小

设置 size 属性。

<wd-text
  text="芦叶满汀洲,寒沙带浅流。二十年重过南楼。柳下系船犹未稳,能几日,又中秋。黄鹤断矶头,故人曾到否?旧江山浑是新愁。欲买桂花同载酒,终不似,少年游。"
  size="16px"
></wd-text>

脱敏

设置 format 属性,当 modephone``name时生效。

<wd-text text="李四" mode="name" :format="true"></wd-text>
<wd-text text="张长三" mode="name" :format="true"></wd-text>
<wd-text text="18888888888" mode="phone" :format="true"></wd-text>

lines

设置 lines 属性,文本显示的行数,如果设置,超出此行数,将会显示省略号。最大值为 5。

<wd-text :text="text" :lines="2" size="16px"></wd-text>

lineHeight

设置 lineHeight 文本行高。

<wd-text :text="text" lineHeight="20px"></wd-text>

前后插槽

设置 prefix suffix 插槽。

<wd-text text="12345678901" mode="phone" format type="primary" prefix="Prefix" suffix="Suffix" />

<wd-text text="12345678901" mode="phone" format type="primary">
  <template #prefix>
    <text>Prefix</text>
  </template>
  <template #suffix>Suffix</template>
</wd-text>

金额

设置 mode="price"

<wd-text text="16354.156" mode="price" type="success" decoration="line-through" prefix="¥" />

文字装饰

设置 decoration 文字装饰,下划线,中划线等。

<wd-text :text="text" type="warning" decoration="underline" />

事件

<wd-text
  text="芦叶满汀洲,寒沙带浅流。二十年重过南楼。柳下系船犹未稳,能几日,又中秋。黄鹤断矶头,故人曾到否?旧江山浑是新愁。欲买桂花同载酒,终不似,少年游。"
  @click="clickTest"
></wd-text>
function clickTest() {
  console.log(1)
}

Attributes

参数 说明 类型 可选值 默认值 最低版本
type 主题类型 string 'primary' / 'error' / 'warning' / 'success' / 'default' default 1.3.4
text 文字 string / number - - 1.3.4
size 字体大小 string - - 1.3.4
mode 文本处理的匹配模式 string 'text' / 'date' / 'phone' / 'name' / 'price' text 1.3.4+
bold 是否粗体,默认 normal boolean - false 1.3.4
format 是否脱敏 boolean 当 mode 为 phone 和 name 时生效 false 1.3.4
color 文字颜色 string - - 1.3.4
lines 文本显示的行数,如果设置,超出此行数,将会显示省略号。最大值为 5。 number - - 1.3.4
lineHeight 文本行高 string - - 1.3.4
decoration 文字装饰,下划线,中划线等 string 'underline' / 'line-through' / 'overline' none 1.3.4+
prefix 前置内容 string - - 1.3.4+
suffix 后置内容 string - - 1.3.4+
call mode=phone 时,点击文本是否拨打电话 boolean - false 1.3.4

Events

事件名称 说明 参数 最低版本
click 标签点击时触发 event 1.3.4

Slots

插槽名称 说明 最低版本
prefix 前置插槽 1.3.4
suffix 后置插槽 1.3.4

外部样式类

类名 说明 最低版本
custom-class 根节点样式 1.3.4
custom-style 根节点样式 1.3.4