vue可以制作多长时间的视频（vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！）

平时开发中我们经常会遇到这样的需求 
    
    
 ，在一个不限高度的盒子中会有很多内容
     


     


     ，如果全部显示用户体验会非常不好 




 




 




，所以可以先折叠起来 

   

   

，当内容达到一定高度时
     

     

     ，显示展开更多按钮  




  




  



，点击即可显示全部内容 


  


  


，先来看看效果图：

 这样做用户体验瞬间得到提升
     
     
    ，接下来看看具体细节 
    
    
 。

<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; }

好啦 




 




 




，具体就是这样啦 

   

   

，挺简单的
     

     

     ，好像我废话比较多  




  




  



，欢迎各位大佬随时指正！