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

好啦，具体就是这样啦，挺简单的，好像我废话比较多，欢迎各位大佬随时指正！