VUE中实现展开、收起操作，动态改变元素高度

一、展开收起功能
要求：课程简介，超过两行就隐藏，并且显示展开按钮；
思路：
1、利用css的属性默认显示2行，我写了一个公共的class（如ellipsis2）

		
.ellipsis2{
    // 仅显示2行，多余省略
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

2、然后判断字数，当字数超过40（这个计算不是很准确，不太严谨），就显示展开隐藏按钮，

<template v-if="length > 40">
            <div class="d-fold" @click="foldFun()" v-if="isOpen">收起<img src="../../assets/img/up.png" alt=""></div>
            <div class="d-fold" @click="foldFun()" v-else>展开<img src="../../assets/img/down.png" alt=""></div>
          </template>

3、展开、收起操作

 // 展开收起
      foldFun(){
        let _this = this;
        if(_this.isOpen) {
           _this.isOpen = false;
        }else{
           _this.isOpen = true;       
        }
      },

第一步完成了展开收起，如果您仅需要这一步，下面的就不需要看了。

二、动态控制元素的padding-top，保证固定不遮挡底部内容
课程的标题和简介是需要固定在顶部，第一步做的是简介的展开和收起；默认收起的时候底部的课程内容是可以正常显示，没有任何遮挡的，但是当简介展开的时候，固定部分增加，出现了底部遮挡的问题，如何处理这个问题呢？我尝试了多种方法，最终通过这个方法解决了。

 <div class="J_part2 pop-Coursewrap">
        <div class="cs-intro" id="J_intro">
          <div class="cs-tit">{{courseData.packageName}}</div>
          <p :class="['d-intro',{'ellipsis': !isOpen} ] " v-html="courseData.introduce"></p>
          <template v-if="length > 40">
            <div class="d-fold" @click="foldFun()" v-if="isOpen">收起<img src="../../assets/img/up.png" alt=""></div>
            <div class="d-fold" @click="foldFun()" v-else>展开<img src="../../assets/img/down.png" alt=""></div>
          </template>
          <img class="close-btn" @click="showInfo(false)" src="../../assets/img/close.png"  alt="">
        </div>
        <div  class="d-bottom"   :style="changeStyle" id="content"  v-html="courseData.description"></div>
      </div>

1、cs-intro固定在顶部:

.cs-intro {
        position: fixed;
        width: 100%;
        padding-bottom: 1.5rem;
        background: #fff;
        padding-left: 0.9375rem;
        margin: 0;
        z-index: 6;
 }

2、被遮挡的是class=“d-bottom”,设置:style=“changeStyle”，changeStyle在data中设置paddingTop,默认是8rem

data(){
	return {
		length: '', //简介的长度
        isOpen: false,  // true 是展开的状态，false是折叠的状态
        changeStyle: {
          paddingTop: '8rem' // 课程详情距离顶部高度
        },
	}
}

3、在展开折叠的时候动态改变padding-top

// 展开收起
      foldFun(){
        let _this = this;

        var h = document.getElementById('J_intro').offsetHeight;
        setTimeout(function(){
          var h = document.getElementById('J_intro').offsetHeight;
          // console.log(h)
        },10)



        if(_this.isOpen) {
           _this.isOpen = false;
          this.changeStyle.paddingTop = '8rem'
        }else{
           _this.isOpen = true;
           // 动态控制底部内容的padding-top
           setTimeout(function(){
              _this.changeStyle.paddingTop = h / 16 + 1.5 + 'rem';
           },20)
        }

      }

这里需要注意一个问题，展开的时候，获取的是原来dom的高度，所以需要添加时间延时获取和设置。
希望自己的总结，对大家有所帮助~