主题
TextV2 文本
使用
文本的常见操作
基础用法
由 type 属性来选择 Text 的类型
尺寸
使用 size 属性配置尺寸,可选的尺寸大小有: lg
、 base
或 sm
自定义颜色
显示省略号
文本内容过长时,可以通过设置 truncated
属性来显示省略号
多行文本溢出
通过设置 line-clamp
属性可以让文本溢出时自动折行
溢出文本展开/收起
通过设置 show-handler
属性可以让文本溢出时显示展开/收起按钮,可选参数为 true
、false
、expand
、collapse
,设置 expand
时只显示展开按钮,设置 collapse
时显示只收起按钮
行高
通过设置 line-height
属性可以调整文本行高
自定义标签
可以通过设置 tag
属性来自定义HTML标签
API
Props
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
content | 文本内容 | string | - |
type | 文本类型 | enum | - |
size | 文本大小 | enum | base |
line-height | 文本行高,单位为rem | number | 1.5 |
truncated | 用于处理文本溢出,开启后会基于 line-clamp 属性显示最大行数的文本,溢出部分显示省略号 | boolean | false |
line-clamp | 显示的最大文本行数 | number | 1 |
color | 文本颜色 | string | - |
tag | 文本标签 | string | 'span' |
show-handler | truncated 为 true 时生效,是否显示点击展开/收起按钮,也可赋值 'expand' 或 'collapse' 精确控制显示的按钮 | enum | false |
expand-text | 展开按钮的文本 | string | - |
collapse-text | 收起按钮的文本 | string | - |
Methods
方法名 | 描述 | 类型 |
---|---|---|
expand | 展开文本内容 | Function |
collapse | 收起文本内容 | Function |
toggle | 切换文本内容的展开/收起状态 | Function |
Slots
插槽名 | 描述 | 参数 |
---|---|---|
default | 文本内容, 优先级高于 content 属性 | - |