更新记录

1.0.0（2026-03-21） 下载此版本

• 支持按 maxLines 自动折叠与展开/收起
• 支持展开文案、收起文案与操作区位置配置
• 支持展开态与收起态分别设置操作区样式
• 支持 toggle、expand、collapse 插槽自定义操作区
• 支持关键词高亮与大小写匹配控制
• 支持渐变遮罩与遮罩高度、颜色配置
• 支持长按复制与文本变化重置折叠状态
• 支持展开/收起图标开关、图标类型与图标颜色配置

平台兼容性

uni-app(5.0)

其他

zy-text-view-more 文本折叠展开

用于展示长文本。超过指定行数后自动折叠，支持展开/收起、关键词高亮、渐变遮罩、长按复制。

插件依赖：uni-icons，如不需要，可自行删除调整

快速开始

<template>
  <view style="padding: 24rpx">
    <zy-text-view-more :text="content" :max-lines="2" :font-size="15"/>
  </view>
</template>

<script setup>
  const content = '这里是一段较长文本，用于演示 zy-text-view-more 插件效果。文本超过指定行数后会自动折叠，用户点击按钮后可展开查看完整内容。关键词高亮示例：心理咨询。';
</script>

常用示例

1) 自定义按钮文案

<zy-text-view-more
  :text="content"
  :max-lines="2"
  expand-text="查看更多"
  collapse-text="收起内容"
/>

2) 关键词高亮

<zy-text-view-more
  :text="content"
  :max-lines="2"
  highlight="心理咨询"
  highlight-color="#ff4d4f"
/>

3) 渐变遮罩与复制控制

<zy-text-view-more
  :text="content"
  :max-lines="2"
  :fade="true"
  :fade-height="40"
  fade-color="#ffffff"
  :long-press-copy="true"
/>

4) 设置操作区位置

<zy-text-view-more
  :text="content"
  :max-lines="2"
  toggle-align="center"
/>

5) 展开与收起使用不同样式

<zy-text-view-more
  :text="content"
  :max-lines="2"
  :expand-toggle-custom-style="{ color: '#fff', backgroundColor: '#2d8cf0', padding: '4px 12px', borderRadius: '999px' }"
  :collapse-toggle-custom-style="{ color: '#fff', backgroundColor: '#19be6b', padding: '4px 12px', borderRadius: '999px' }"
/>

6) 使用插槽自定义操作区

<zy-text-view-more :text="content" :max-lines="2">
  <template #expand>
    <view class="my-toggle my-toggle--expand">展开全文</view>
  </template>
  <template #collapse>
    <view class="my-toggle my-toggle--collapse">收起内容</view>
  </template>
</zy-text-view-more>

7) 自定义展开与收起图标

<zy-text-view-more
  :text="content"
  :max-lines="2"
  expand-icon="plus"
  collapse-icon="minus"
/>

Props

事件

插槽

使用说明

• 文本未超过 maxLines 时，不显示展开/收起按钮
• 设置 highlight 后，仅命中的关键词会被高亮显示
• longPressCopy=true 时，长按文本会复制完整内容
• toggleAlign 可控制展开/收起操作区位置，支持 left、center、right
• 不传 toggleIconColor 时，图标会自动跟随当前操作区文字颜色