外观
Text 文本
约 676 字大约 2 分钟
2025-10-31
此组件集成了文本类在项目中的常用功能 您大可不必在使用特殊文本时自己定义,text组件几乎涵盖您能使用的大部分场景。
基本使用
- 通过
text参数设置文本内容。推荐您使用:text='value'的形式
<un-text text="我用十年青春,赴你最后之约"></un-text>设置主题
- 通过
type参数设置文本主题,我们提供了五类属性。 primary error success warning info
<un-text type="primary" text="主色"></un-text>
<un-text type="error" text="错误"></un-text>
<un-text type="success" text="成功"></un-text>
<un-text type="warning" text="警告"></un-text>
<un-text type="info" text="信息"></un-text>前后图标
添加prefixIcon,suffixIcon指定图标和位置,iconStyle设置图标大小
<un-text prefixIcon="baidu" iconStyle="font-size: 19px" text="百度一下,你就知道"></un-text>
<un-text suffixIcon="arrow-leftward" iconStyle="font-size: 18px" text="查看更多"></un-text>超出隐藏
内置了文字超出隐藏样式,设置lines属性表明几行后隐藏
<un-text :lines="2" text="关于uView的取名来由,首字母u来自于uni-app首字母,
uni-app是基Vuejs,Vue和View(延伸为UI、视图之意)同音,同时view组件uni-app中
最础最重要的组件,故取名uView,表达源于uni-app和Vue之意,同时在此也对它示感谢。"></un-text>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 主题颜色 | Enum | - |
| show | 是否显示 | Boolean | true |
| block | 是否为块级元素 | Boolean | false |
| flex | 是否为flex布局 | Boolean | false |
| text | 显示的值 | String | Number | - |
| prefixIcon | 前置图标 | String | - |
| suffixIcon | 后置图标 | String | - |
| bold | 是否粗体,默认normal | Boolean | false |
| lines | 文本显示的行数,如果设置,超出此行数,将会显示省略号 | String | Number | - |
| color | 文本颜色 | String | #303133 |
| size | 字体大小 | String | Number | 15 |
| iconStyle | 图标的样式 | Object | String | {} |
| align | 文本对齐方式 | Enum | left |
| wordWrap | 文字换行 | Enum | normal |
| decoration | 文字装饰,下划线,中划线等 | Enum | none |
| customStyle | 自定义样式 | String | Object | - |
| lineHeight | 文本行高 | Number | String | - |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| click | 点击触发事件 | Function |
Css 变量
| 变量名 | 默认值 | 说明 |
|---|---|---|
| --un-text-color | $text-color | 文本默认颜色 |
| --un-text-font-size | $text-base | 文本默认字体大小 |
| --un-text-color-primary | $color-primary | 主色 |
| --un-text-color-error | $color-error | 错误色 |
| --un-text-color-success | $color-success | 成功色 |
| --un-text-color-warning | $color-warning | 警告色 |
| --un-text-color-info | $color-info | 信息色 |
提示
组件内部默认使用 css 变量,如需修改,请查看 css 变量使用 文档
