更新记录
1.0.1(2025-06-27)
下载此版本
修改插件使用名称
1.0.0(2025-06-27)
下载此版本
初版
平台兼容性
uni-app
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
√ |
√ |
√ |
√ |
√ |
× |
- |
- |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
√ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
uni-app x
Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
√ |
√ |
5.0 |
12 |
- |
√ |
其他
使用说明
开箱即用,支持高度自定义:可自由设置文本样式、展开/收起按钮文字及样式,并能指定展开行数等。操作流畅如丝,无闪动、无卡顿,带来德芙般的顺滑体验。
使用方式
下载后可直接使用,插件符合uni_modules规则
示例
<zh-readMore :text="text"></zh-readMore>
参数说明
参数 |
类型 |
默认值 |
描述 |
text |
String |
'' |
需要展示的文本 |
textStyle |
Object |
{'color': '#000','font-size': '28rpx','font-weight': '400'} |
需要展示的文本样式 |
rows |
Number |
3 |
文本容器中超出多行后显示省略号 |
lineBreak |
Boolean |
true |
保留空白字符序列,同时允许正常换行 |
packupLineBreak |
Boolean |
false |
只在收起时,忽略空白字符;展开时,保留空白字符序列,同时允许正常换行 |
unfoldText |
String |
展开 |
展开操作的文案 |
unfoldTextStyle |
Object |
{'color': '#206ef7','font-size': '28rpx','font-weight': '400'} |
展开操作的样式 |
packupText |
String |
收起 |
收起操作的文案 |
packupTextStyle |
Object |
{'color': '#206ef7','font-size': '28rpx','font-weight': '400'} |
收起操作的样式 |
duration |
Number/String |
0.1 |
展示动画过度时间(单位s) |
Event 事件
事件名 |
说明 |
回调参数 |
click |
展开/收起时的事件 |
展开true 收起false |
vue3示例
<template>
<view>
<zh-readMore :text="text"></zh-readMore>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const text = ref('暮色渐沉,天边最后一缕霞光温柔地融化在远山的轮廓里。微风拂过,树叶沙沙低语,仿佛在诉说某个古老的秘密。溪水潺潺,映着星光,如碎银般闪烁。夜莺的歌声从林间飘来,清亮而孤独,与夜色交织成一片静谧的梦。这一刻,时光仿佛停驻,世界只剩下心跳与自然的呼吸');
</script>
vue2示例
<template>
<view>
<zh-readMore :text="text"></zh-readMore>
</view>
</template>
<script>
export default {
data() {
return {
text: '暮色渐沉,天边最后一缕霞光温柔地融化在远山的轮廓里。微风拂过,树叶沙沙低语,仿佛在诉说某个古老的秘密。溪水潺潺,映着星光,如碎银般闪烁。夜莺的歌声从林间飘来,清亮而孤独,与夜色交织成一片静谧的梦。这一刻,时光仿佛停驻,世界只剩下心跳与自然的呼吸'
}
}
}
</script>