n-text 文本
原生 text 组件为根(无包装层):8 档色调 + 字号/加粗/装饰线快捷排版、行数省略、可选中复制。纯展示组件——数据变换(脱敏/金额格式化)属于函数层,见 composables/useFormat,与本组件组合使用。无插槽——一段多色的混排富文本直接用原生 text 嵌套 text,或把多个 n-text 放进 flex 行容器组合。
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
selectable 依赖原生 user-select 属性,微信基础库 4.41+ 生效(低版本静默无效); lines 省略各端实现不同:App 端走 text 的 max-lines 组件属性(官方通道),Web / 微信端走 -webkit-line-clamp 标准多行截断,效果一致。
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| text | 文本内容(需脱敏/金额等变换时,组合 useFormat 后传入) | String | "" | - |
| type | 色调:ink 主文字 / secondary 次要文字(随深浅主题);onfill 实色填充底上用;其余取功能色 | String | ink | ink<br/>secondary<br/>onfill<br/>primary<br/>success<br/>warning<br/>error<br/>info |
| size | 字号(px) | Number | 14 | - |
| bold | 加粗 | Boolean | false | - |
| color | 自定义颜色(设置后 type 色调类不生效,配色不受主题影响) | String | "" | 与 css 相同 |
| decoration | 装饰线:underline 下划线 / line-through 删除线 | String | none | none<br/>underline<br/>line-through |
| lines | 行数省略:超出 N 行截断显示省略号,0 为不省略 | Number | 0 | - |
| selectable | 可选中复制(绑原生 user-select 属性,全端支持) | Boolean | false | - |
| custom-class | 挂到根节点的额外 class(类须定义在组件样式表内) | String | "" | - |
| custom-style | 根节点行内样式(text 根即文字节点,直达排版细节) | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击文字时触发 | event |
实现说明
| 能力 | 常见做法 | 本组件做法与取舍 |
|---|---|---|
| 根节点 | view 包一层 text 便于挂插槽 | 原生 text 为根(无包装层):纯文本不值得多一层节点;代价是无插槽——多色混排直接用原生 text 嵌套 text,或多个 n-text 放进 flex 行容器 |
| 行数省略 | CSS lines 属性(官方已废弃)/ 各端各写 | 按端分治:App 端绑 text 的 max-lines 组件属性(官方通道,-1 表示不限);Web / 微信端不认识 max-lines,行内拼 -webkit-line-clamp 系标准多行截断;两端经元素级条件编译隔离,互不产生告警 |
| 数据变换(脱敏 / 金额 / 卡号 / 邮箱) | 组件内置 type=text 值即格式化 | 归函数层 composables/useFormat,格式化结果传入 text——展示组件不掺数据逻辑,多种变换可自由组合 |
| 前后图标 | 组件内置 prefixIcon / suffixIcon 属性 | 不收:图标与文字组合把 n-icon 与 n-text 放进 flex 行容器(间距走 n-icon 的 custom-style),避免纯文本组件背图标渲染职责 |
| 文本对齐 | 组件 align 属性 | 不收:对齐是容器职责(flex 的 justify-content / align-items),text 根为内容自适应宽度,自身 text-align 需配合宽度撑满才可见 |
| 斜体 / 半粗 / 行高 / 字距 / 长词断行 | 各自单列属性 | 不收:低频排版细节统一走 custom-style 直达(font-style:italic、font-weight:600、line-height:1、letter-spacing:1px、word-break:break-all,均为全端合法 CSS) |
| 装饰线组合(上划线 / 下划线+删除线同挂) | decoration 开放任意字符串 | 枚举收窄到 none / underline / line-through 三档(高频语义);overline 与组合线走 custom-style="text-decoration-line:overline" 等直达 |
| 可选中 | selectable 属性 | 绑 user-select(官方推荐属性;App 端长按弹"复制"菜单,Web 端文本本就可复制);selectable 属性鸿蒙端不支持,不绑 |
| 点击载荷 | 自定义 { text, param } 回传 | 透传原生点击事件对象(坐标等全量信息),业务需要的自定义载荷由调用方闭包携带 |
| 与图标同排 | 文字裸默认行高 | 基准行高 1.5 服务多行可读性;与 n-icon 同行并列时按库内行高铁律显式对齐行盒(custom-style="line-height:16px" 取图标 size 值),避免基线错位 |
:::
::: doc 组件无插槽:混排富文本(一段多色)用原生 text 嵌套 text 实现;图标与文字组合把 n-icon 与 n-text 放进 flex 行容器(间距走 n-icon 的 custom-style="margin-right:4px")。