位置: IT常识 - 正文
vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！(vue super)
编辑：rootadminvue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ 
本文链接地址:https://www.jiuchutong.com/zhishi/287955.html
转载请保留说明！
推荐整理分享vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！(vue super)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue能做超过一分钟的么,vue nedb,vue超时设置,vue实用技巧,vue最大时长是多少,vue super,vue能做超过一分钟的么,vue super,内容如对您有帮助，希望把文章链接给更多的朋友！
平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图：
这样做用户体验瞬间得到提升，接下来看看具体细节。
<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，主要就是这两个样式在控制。最后给展开更多添加点击事件，隐藏自己。
.statusText { overflow: hidden; }好啦，具体就是这样啦，挺简单的，好像我废话比较多，欢迎各位大佬随时指正！
上一篇：夜间潜水时发现的章鱼，夏威夷科纳附近 (© Jeff Milisen/Alamy)(夜间潜水时发现水体)