LimeReadMore 查看更多

• 查看更多、阅读更多，用于先预览一部分，点击展开全部内容，兼容uniapp/uniappx
• 插件依赖 lime-icon

安装

导入即可

注意

• 🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。
• 🔔 不需要lime-svg在lime-icon代码中注释掉即可

// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->

代码演示

<l-read-more>
<!-- 非vue3需要一个根节点 -->
	<view>
		<text>那一天我二十一岁，在我一生的黄金时代，我还有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我知道，生活就是个缓慢受槌的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了槌的牛一样。可是我二十一岁生日时没预见到这一点。我觉得自己会永远生猛下去，什么也槌不了我。——王小波《黄金时代》</text>
		<text>初识王小波是通过阅读他的杂文集——《我的精神家园》。那是一本老旧泛黄的书，孤零零地挤在一堆散文作家中间。我拍了拍散落在上面的灰尘，只翻开一页就不能自拔。老实说，这种新奇有趣的写法确实让我眼前一亮。</text>
	</view>
</l-read-more>

插件标签

• 默认 l-read-more 为 component
• 默认 lime-read-more 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Props

参数	说明	默认值
v-model	展开或收起	false
disabled	是否禁用，禁用后无法点击展开或收起	false
expandText	展开文本	展开更多
expandIcon	展开icon	chevron-down
collapseText	收起文本	收起
expandIcon	收起icon	chevron-up
height	收起时的高度	100px
fontSize	展开收起字体大小	30rpx
textColor	展开收起文本颜色	rgba(0,0,0,0.45)
maskColor	遮罩的渐变 string[]	['white', 'rgba(255, 255, 255, 0.3)']

Events

参数	说明	参数
change	切换触发	value:boolean
click	点击触发	``

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码