vue中实现文字超过2行... 展开-收起(兼容ie)

1. 先看看实际效果
   
   2.需求一步一步分析
   当文字超出省略号 就想到css样式实现（ie不兼容）

      overflow: hidden; 
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; 

3.由于自己也是一个懒人、就想在网上找找、看了几篇文章都是根据width、height来计算的 看了一下写的比较复杂、都只是针对单个文本来的、现实中一般都是列表展示数据的
代码如下：复制代码即可运行、兼容ie

  
  
  
  



  

    

      

        占位
      
      

        

          

            {{item.desc}}
          
          

            
展开
            
收起
          
        
      
    
  

4. 分析代码
   • 省略号通过:after伪类实现
   • 文字一行高度、在浏览器中展示都有所区别、所以在这里我在页面放置了一段占位文本设置了隐藏占位
   • 通过获取占位文本的高度 * 2 计算出2行文本内容 动态改变status状态 null-无展开收起 true-展开 false-收起 结合max-height实现
   • 注意⚠️ 解析完数据 由于dom没加载完 ref获取不到需要在 **this.$nextTick\ast \ast 中获取ref值此时dom加载完或者使用setTimeout(fn,0)延时解决this.$set用法自行了解

5.完结 （不明白可以提问交流、谢谢）