vue中文本超过3行省略并显示下拉箭头(包括获取文本行数)

一、功能需求
1.前提：动态渲染分享列表；
2.内容超过三行，隐藏多余行数，显示…并配有下拉箭头；
3.点击下拉箭头跳转至详情页（仿照微博）；
4.注意：网上查询了很多，在移动端都有一些设备不适配，因此采用了css和获取行数进行的条件判断。
5.备注:从网上找到了一篇不错的参考文章，实现了我上述说的内容CSS伪元素（以:after为例）插入图片，本文中的vue项目加jquery，不推荐使用。
二、实现效果
1.文本少于三行的隐藏下拉箭头：

2.文本超过三行展示省略号及下拉箭头：

三、代码部分
1.html

<div v-for='item in shareList' :key='item.id'>
   <!-- 根据js获取的行数item.rowNum，进行样式变通 -->
    <div :class="[item.rowNum>3?'contentClass':'contentOneClass']" @click="shareDetails(item)" >
         <img src="@/assets/img/share_open.png" alt=""
         class="contentOpen" v-if="item.rowNum>3">
         <span :class="item.id">{{item.content}}</span>
    </div>  
</div>

2.css-less编写

.contentClass{
   /*文本超过3行展示...*/
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   /*文本超过3行展示...*/
   
   .contentOpen{
	  width:12px;
	  height:12px;
	  /*文本右下环绕设置1*/
	  float: right;
	  clear: both;
	  /*文本右下环绕设置1*/

	     img{
		   width:100%;
		   height:100%;
		 }
   }
}

/*文本右下环绕设置2*/
.contentClass::before{
  content: '';
  float: right;
  width: 0;
  height: 54px;/*此高度+下拉图片的高=三行文本高度*/
}
/*文本右下环绕设置2*/

.contentOneClass,.contentClass{
    /*单独写contentOneClass的原因：.contentClass::before有一个height，在文本没有超过三行的时候，会有很多留白，不美观。*/
   /*一些其他样式*/
   color:#555;
   font-size: 14px;
   margin-bottom:10px;
   line-height: 24px;
}

3.js-jquery

//网上搜索了获取文本高度的方法，使用jquery的居多。而我搜索了现有项目，在创建初期已经下载了jquery，所以采用jquery提供的方法获取文本高度并对下拉框进行展示。
this.$nextTick(() => {
   //遍历已经渲染的列表，查看每个文本的高度
   //此处是根据每条分享的id进行动态获取
  this.list.forEach((item)=>{
   //高度/行高=文本行数
       let rowNum=Math.round($(`.${item.id}`).height()/parseFloat($(`.${item.id}`).css('line-height')));
       //添加一个字段，用于图标显示隐藏用。
       item.rowNum = rowNum;
   })  
})