更新记录
多行文本展开收起,可配置展示N行,支持展开/收起。 文本行数少于配置行数时会自动隐藏按钮。
平台兼容性
uni-app(4.06)
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
× |
√ |
√ |
√ |
- |
- |
- |
- |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
√ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
MultiLinesTextEllipsis 组件文档
组件概述
MultiLinesTextEllipsis 是一个 Vue 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>
注意事项
- 组件依赖于 Vue 3 和 TypeScript
- 组件使用了
uni-icons
组件,确保项目中已引入
- 如需自定义样式,可以通过覆盖组件的 CSS 类实现