Skip to content

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")。

记录 · 思考 · 创作