更新记录

1.1.0(2022-06-30) 下载此版本

修复微信小程序不兼容问题

1.0.0(2022-05-24) 下载此版本

1.0.0(2022-5-24)

多行文本展示,可配置展示N行,支持展开/收起。 展开收起的按钮紧随最后一行尾部,支持自定义展开/收起的提示布局


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.21 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

简介

一个较为简单实用的版本

功能

  1. 自动计算单行高、所有行总高,动态控制
  2. 展开/收起 按钮可实现,实际行数小于等于指定的行数时,操作按钮自动隐藏

补充:

  1. 当文本实际行数小于或等于指定行数(line)时,‘展开’或‘收起’按钮自动隐藏

  2. 该插件兼容H5、小程序(亲测)

用法

参数说明

属性名 类型 默认值 描述 备注
line Number 1 最多展示line行,超过隐藏 当实际行数小于或等于指定line时,操作按钮自动隐藏
dt String 实际文本
enableButton Boolean true 是否显示‘展开’‘收起’
expandText String 展开 展开命名
foldHint String 收起 收起命名

代码示例

import TextOverflow from "@/components/text-over-flow/text-over-flow.vue"

components: {
    TextOverflow
}

方式一:slot方式传值

// expandText和foldHint有默认值,可以不写。line默认为1
<mote-lines-divide :line="3" expandText="展开" foldHint="收起">
        文本内容
</mote-lines-divide>

方式二:dt参数传值

expandText和foldHint有默认值,可以不写。line默认为1
<mote-lines-divide :dt="文本对象" :line="3" expandText="展开" foldHint="收起"/>

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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