平时开发中我们经常会遇到这样的需求,在一个不限高度的盒子中会有很多内容,如果全部显示用户体验会非常不好,所以可以先折叠起来,当内容达到一定高度时,显示展开更多按钮,点击即可显示全部内容,先来看看效果图:
这样做用户体验瞬间得到提升,接下来看看具体细节。
<div class="like-box" v-if="likeList.length>0">
<span class="like-triangle"></span>
主要操作在内容这里
<ul class="like-person" ref="content" :style="{ 'max-height': status ? textHeight : auto }" :class="{ statusText: status }">
<li class="person" v-for="(item,index) in likeList" :key="index" @click="personCenter">
<i class="iconfont icon-dianzan"></i>
<span>{{item.username}}</span>
<span>,</span>
</li>
</ul>
<div @click="moreClick" v-if="isShowMore">
<div class="shenglue">……</div>
<div class="more">展开更多</div>
</div>
</div>
样式大家可依据自己项目需求进行设计,这里就不贴了,主要说几个关键的。
1、在data中定义三个属性
isShowMore: false, // 控制展开更多的显示与隐藏
textHeight: null, // 框中内容的高度
status: false, // 内容状态是否打开
2. 计算内容是否超出两行
获取内容高度时要使用this.$nextTick()保证获取到的高度时DOM渲染完成后的高度
mounted () {
// 计算展开更多内容超出显示
this.$nextTick(() => {
// 这里具体行数可依据需求自定义
let lineHeight = 27 * 2
this.textHeight = `${lineHeight}px`
if (this.$refs.content.offsetHeight > lineHeight) {
this.isShowMore = true
this.status = true
} else {
this.isShowMore = false
this.status = false
}
})
}
3.给内容框绑定动态style和动态class
用status来判断,若为true,添加动态style,设置最大高度为2行内容的高度,相反高度auto,另外添加动态class,让内容为overflow: hidden,主要就是这两个样式在控制。最后给展开更多添加点击事件,隐藏自己。文章来源:https://www.toymoban.com/news/detail-424095.html
.statusText {
overflow: hidden;
}
好啦,具体就是这样啦,挺简单的,好像我废话比较多,欢迎各位大佬随时指正! 文章来源地址https://www.toymoban.com/news/detail-424095.html
到了这里,关于vue 实现内容超出两行显示展开更多功能,可依据需求自定义任意行数!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!