文本溢出省略展开收起2

<div class="openbox">
        <div :class="showTotal ? 'upper-part' : 'pack-up'">
    			<div class="abstract" :title="desc" ref="deta">
    					<span class="content-deta" v-html="detailList.appDesc">
    					</span>
    					<div class="unfold" @click="isShowTotal" v-show="detailList.appDesc.length > 100">
    							<p>{{changeButton ? '收起' : '展开'}}
                    <van-icon :name="changeButton ? 'arrow-up' : 'arrow-down'" size="10" color="#0888A6"/>
                  </p>
    					</div>
    			</div>
    		</div>
    </div>

      desc: '',
       // 是否展示所有文本内容
      showTotal: false,
      // 显示展开还是收起
      changeButton: false,

// 课程简介展开收起
    isShowTotal () {
        console.log('是否展开'+this.showTotal);
        this.showTotal = !this.showTotal;
        this.changeButton = !this.changeButton;
    },

    calculateText() {
      let abstractHeight = window.getComputedStyle(this.$refs.deta).height.replace('px', '');
      console.log(abstractHeight)
      if (parseInt(abstractHeight) * 2 > 63) {
        this.changeButton = true;
        this.showTotal = false;
      } else {
        this.changeButton = false;
        this.showTotal = true;
      }
    },

 var reg = /[/]/g;
 this.desc=this.detailList.appDesc.replace(reg," ");
 this.detailList.appDesc=this.detailList.appDesc.replace(reg,"<br>");

// 展开
 .upper-part {
  .abstract {
    line-height: 19.6px;
    overflow: hidden;
    zoom:1;
    .content-deta {
      font-size: 13px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
  .unfold {
    float: right;
    p {
      margin-top: 3px;
      margin-bottom: 0px;
      font-size: 13px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #0888A6;
    }
  }
 }
 // 收起
 .pack-up {
    position: relative;

    .abstract {
        border-radius: 22.5px 22.5px 0px 0px;
        padding: 0 18px;
        // 最大高度设为3倍的行间距
        max-height: 126px;
        line-height: 21px;
        word-wrap: break-word;
        /*强制打散字符*/
        word-break: break-all;
        background: #ffffff;
        /*同背景色*/
        color: #ffffff;
        overflow: hidden;
        .content-deta {
            width: 100%;
            padding: 0 21px;
        }
        &:after,
        // 这是展开前实际显示的内容
        &:before {
            content: attr(title);
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            font-size: 13px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
        }
        // 把最后最后一行自身的上面三行遮住
        &:before {
            display: block;
            overflow: hidden;
            z-index: 1;
            max-height: 84px;
            background: #ffffff;
        }
        &:after {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 122px;
            /*截取行数*/
            -webkit-line-clamp: 6;
            text-overflow: ellipsis;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            /*行首缩进字符数，值为[(截取行数-1)*尾部留空字符数]*/
            text-indent: -12px;
            /*尾部留空字符数*/
            padding-right: 3em;

        }
        .unfold {
            z-index: 11;
            outline: 0;
            position: absolute;
            right: 0px;
            bottom: 0;
            p {
                margin: 0;
                font-size: 13px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #0888A6;
            }
        }
    }
 }