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

时间:2020-7-28 作者:admin


一、展开收起功能
要求:课程简介,超过两行就隐藏,并且显示展开按钮;
思路:
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的高度,所以需要添加时间延时获取和设置。
希望自己的总结,对大家有所帮助~

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。