更新记录

1.0.0 下载此版本

多行文本展开收起,可配置展示N行,支持展开/收起。 文本行数少于配置行数时会自动隐藏按钮。


平台兼容性

uni-app(4.06)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
× - - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - -

MultiLinesTextEllipsis 组件文档

组件概述

MultiLinesTextEllipsis 是一个 Vue 3 组件,用于实现文本的多行省略显示,并支持展开/收起功能。

组件功能

  1. 限制文本显示的行数
  2. 支持展开/收起文本功能
  3. 可自定义展开/收起按钮的文本和颜色

组件属性

属性名 类型 默认值 说明
line number/string 1 最多展示的行数
text string "" 实际显示的文本
showButton boolean true 是否显示展开/收起按钮
expandText string "全部" 展开按钮的文本
collapseText string "收起" 收起按钮的文本
buttonTextColor string "#60B8A6" 按钮文本的颜色

组件使用示例

方式一:slot方式传值

<template>
  <div>
    <multi-lines-text
      :line="2"
      :showButton="true"
      expandText="查看全部"
      collapseText="收起"
      buttonTextColor="#1989fa"
    >
      这是一段很长的文本,超过两行后会被省略显示,点击展开按钮可以查看全部内容。
    </multi-lines-text>
  </div>
</template>

<script setup>
  // 路径自行修改
  import MultiLinesText from "@/components/multi-lines-text/index.vue";
</script>

方式二:text参数传值

<template>
  <div>
    <multi-lines-text
      :line="2"
      text="这是一段很长的文本,超过两行后会被省略显示,点击展开按钮可以查看全部内容。"
      :showButton="true"
      expandText="查看全部"
      collapseText="收起"
      buttonTextColor="#1989fa"
    />
  </div>
</template>

<script setup>
  // 路径自行修改
  import MultiLinesText from "@/components/multi-lines-text/index.vue";
</script>

注意事项

  1. 组件依赖于 Vue 3 和 TypeScript
  2. 组件使用了 uni-icons 组件,确保项目中已引入
  3. 如需自定义样式,可以通过覆盖组件的 CSS 类实现

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问