Appearance

ReadMore 阅读更多 ​

介绍 ​

用于收起长文本内容，点击操作区域可展开查看全文。支持自定义收起高度、展开/收起文案与图标、主题颜色、一次性展开、展开前拦截回调等功能，也可用于付费内容等需要"查看更多"交互的场景。

引入 ​

typescript
import { TnReadMore } from "@tuniao/tn-ui";

代码演示 ​

基础用法 ​

默认收起高度为 125vp，超出内容以渐变遮罩收起，点击"展开阅读全文"展开查看全部内容。

基础用法

点我查看代码
typescript
@Local expand: boolean = false;

TnReadMore({
  expand: this.expand,
  $expand: (val: boolean) => { this.expand = val; }
}) {
  Text("噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！" +
    "尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。" +
    "地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。")
    .fontSize(14)
    .lineHeight(22);
}

自定义收起高度 ​

通过 collapseHeight 属性设置收起时显示内容的高度，单位 vp。默认值 125。

自定义收起高度

点我查看代码
typescript
@Local expand: boolean = false;

TnReadMore({
  expand: this.expand,
  $expand: (val: boolean) => { this.expand = val; },
  collapseHeight: 80
}) {
  Text("长文本内容...")
    .fontSize(14)
    .lineHeight(22);
}

自定义文案和图标 ​

通过 expandText、expandIcon 设置展开时的文案和图标，通过 foldText、foldIcon 设置收起时的文案和图标。图标名称对应 TnIcon 组件支持的图标。

自定义文案和图标

点我查看代码
typescript
@Local expand: boolean = false;

TnReadMore({
  expand: this.expand,
  $expand: (val: boolean) => { this.expand = val; },
  expandText: "付费查看全文",
  expandIcon: "lock",
  foldText: "收起全文",
  foldIcon: "up-arrow"
}) {
  Text("长文本内容...")
    .fontSize(14)
    .lineHeight(22);
}

隐藏收起按钮 ​

通过 showFold 属性设置为 false，展开后不显示收起按钮，用户无法再次收起内容。

点我查看代码
typescript
@Local expand: boolean = false;

TnReadMore({
  expand: this.expand,
  $expand: (val: boolean) => { this.expand = val; },
  showFold: false
}) {
  Text("长文本内容...")
    .fontSize(14)
    .lineHeight(22);
}

自定义颜色 ​

通过 tipColor 属性直接设置操作区域文字颜色，或通过 colorType 属性使用主题颜色类型（不设置 tipColor 时生效）。

自定义颜色

点我查看代码
typescript
@Local expand1: boolean = false;
@Local expand2: boolean = false;

// 使用主题颜色类型
TnReadMore({
  expand: this.expand1,
  $expand: (val: boolean) => { this.expand1 = val; },
  colorType: "danger"
}) {
  Text("长文本内容...")
    .fontSize(14)
    .lineHeight(22);
}

// 使用自定义颜色
TnReadMore({
  expand: this.expand2,
  $expand: (val: boolean) => { this.expand2 = val; },
  tipColor: "#7232dd"
}) {
  Text("长文本内容...")
    .fontSize(14)
    .lineHeight(22);
}

一次性展开 ​

通过 once 属性设置为 true，展开后不再显示收起按钮，适用于展开后无需再次收起的场景。

点我查看代码
typescript
@Local expand: boolean = false;

TnReadMore({
  expand: this.expand,
  $expand: (val: boolean) => { this.expand = val; },
  once: true
}) {
  Text("长文本内容...")
    .fontSize(14)
    .lineHeight(22);
}

默认展开 ​

通过 expand 属性设置为 true，初始时内容已展开。

点我查看代码
typescript
@Local expand: boolean = true;

TnReadMore({
  expand: this.expand,
  $expand: (val: boolean) => { this.expand = val; }
}) {
  Text("长文本内容...")
    .fontSize(14)
    .lineHeight(22);
}

展开前拦截 ​

通过 beforeExpand 回调拦截展开操作。回调函数返回 boolean 或 Promise<boolean>，返回 false 时阻止展开。适用于付费内容校验、权限判断等场景。

点我查看代码
typescript
@Local expand: boolean = false;

TnReadMore({
  expand: this.expand,
  $expand: (val: boolean) => { this.expand = val; },
  expandText: "验证后查看",
  beforeExpand: (): Promise<boolean> => {
    return new Promise<boolean>((resolve) => {
      // 模拟异步校验（如付费验证、权限检查）
      setTimeout(() => {
        resolve(true); // 返回 true 允许展开，false 阻止展开
      }, 1000);
    });
  }
}) {
  Text("长文本内容...")
    .fontSize(14)
    .lineHeight(22);
}

事件回调 ​

通过 onExpand 监听展开事件，通过 onFold 监听收起事件。

点我查看代码
typescript
@Local expand: boolean = false;

TnReadMore({
  expand: this.expand,
  $expand: (val: boolean) => { this.expand = val; },
  onExpand: () => {
    console.info("内容已展开");
  },
  onFold: () => {
    console.info("内容已收起");
  }
}) {
  Text("长文本内容...")
    .fontSize(14)
    .lineHeight(22);
}

API ​

Props ​

参数说明类型默认值
expand是否展开booleanfalse
collapseHeight收起时显示内容的高度，单位 vpnumber125
showFold是否显示收起按钮booleantrue
expandText展开时操作文案string"展开阅读全文"
expandIcon展开时显示的图标名称string"down"
foldText收起时操作文案string"收起"
foldIcon收起时显示的图标名称string"up"
tipColor操作区域文字颜色，优先级高于 colorTypeResourceColor-
colorType主题颜色类型，不设置 tipColor 时生效TnComponentColorType"primary"
duration动画时长，单位 ms，不设置时使用主题默认动画时长number0
once是否一次性展开（展开后不再显示收起按钮）booleanfalse
beforeExpand展开前回调，返回 false 阻止展开() => Promise<boolean> | boolean-

Slots ​

名称说明
defaultBuilder默认内容插槽，通过尾随闭包传入需要收起/展开的内容

Events ​

事件名说明回调参数
onExpand展开时触发-
onFold收起时触发-
$expand展开状态双向绑定(value: boolean) => void

方法 ​

通过组件实例调用：

方法名说明参数返回值
resetContentHeight重新测量内容高度，在内容动态变更后调用-void

主题颜色类型 ​

colorType 支持以下主题颜色名称：

名称说明
"primary"主色
"success"成功色
"warning"警告色
"danger"危险色
"info"信息色