vue超过三行隐藏

     分享一下vue在动态获取文章，在超过三行之后隐藏起来，不多说直接上代码分解

 <van-card v-for="(item,index) in comment.list" :key="index"
  :thumb="item.avatarUrl">
  <div slot="desc" class="commentcontent " v-html="item.content" ref="Container" :class="{'info':item.status}" >
  </div>

  <div slot="footer" v-if="item.status!==null">
    <p v-on:click="opencomment(item)">{{item.status? '展开' : '收起'}}</p>
  </div>
</van-card>

这里  我使用的是ref是重点。注意，没有分号。

然后在data里加一个属性

用来记录List的索引。如果没有做分页的 这个可以不用。

因为做了分页，所以把这个获取之后每次都要去计算 

 

calculate() {
  //这里获取的是ref
  let con= this.$refs.Container;
 // let oneHeight = this.$refs.more.scrollHeight;
//这里我就直接算的高度，没有动态获取
  let twoHeight = 21 * 3
  console.log(twoHeight)
  this.textHeight = `${twoHeight}px`;
  let tempindex = this.commentindex;
for (let i =tempindex; i < con.length; i++) {
    let curHeight = con[i].offsetHeight;
  this.commentindex++;
  console.log(curHeight)
    if (curHeight > twoHeight) {
      this.$set(this.comment.list, i, Object.assign({}, this.comment.list[i], { status: true }))
    } else {
      this.$set(this.comment.list, i, Object.assign({}, this.comment.list[i], { status: null }))
    }

  }
}

下面这个是样式

.info {
  word-break: break-all;
  display: -webkit-box; /**对象作为伸缩盒子模型展示**/
  -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
  -webkit-line-clamp: 3; /**显示的行数**/
  overflow: hidden; /**隐藏超出的内容**/
}

如果status为true就加上这个属性，反之为false