vue 超过内容展开折叠组件，支持for多个

///
偷个懒，只做了3行4行的，其他的行数请自行计算  let num
//
<template>
  <div>
    <div
      class="text-wrapper"
      :class="
        showUnfoldBtnObj[foldKey] && unFoldObj[foldKey] ? ellipsisClass : ''
      "
    >
      <div v-html="text" :class="foldContentClass"></div>
    </div>
    <div
      class="unfold"
      @click="handleFold(foldKey)"
      v-if="showUnfoldBtnObj[foldKey]"
    >
      {{ unFoldObj[foldKey] ? '展开' : '折叠' }}
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
    data() {
        return {
            showUnfoldBtnObj:{},
            unFoldObj:{}
        }
    },
    props:{
        //处理的文字、也可以是富文本
        text:{
            type:String,
            required:true,
            default:''
        },
        //超过几行显示省略号,先处理3行和4行的
        line:{
            type:Number,
            required:true,
            default:3
        },
        //由于是数组，这里要一个唯一的foldKey作为标识
        foldKey:{
            required:true,
            default:''
        }
    },
    computed:{
        ellipsisClass(){
            return 'ellipsis-'+this.line
        },
        foldContentClass(){
            return 'fold-content-'+this.foldKey
        }
    },
    mounted(){
      this.calcLineHeight();
      setTimeout(()=>{
          if(sessionStorage.getItem('showUnfoldBtnObj')){
              this.showUnfoldBtnObj=JSON.parse(sessionStorage.getItem('showUnfoldBtnObj'))
          }
          if(sessionStorage.getItem('unFoldObj')){
              this.unFoldObj=JSON.parse(sessionStorage.getItem('unFoldObj'))
          }
      },300)
    },
    methods: {
        getRem () {
            const defaultRem = 16;
            let winWidth = window.innerWidth;
            return winWidth / 375 * defaultRem;
        },
        calcLineHeight(){
            setTimeout(()=>{
                let className ='.fold-content-'+this.foldKey
                const el =  document.querySelector(className);
                let rem = parseFloat(this.getRem());
                let num=this.line===4?5.25:4;//先处理3行和4行的
                if(sessionStorage.getItem('showUnfoldBtnObj')){
                    this.showUnfoldBtnObj=JSON.parse(sessionStorage.getItem('showUnfoldBtnObj'))
                }
                if(sessionStorage.getItem('unFoldObj')){
                    this.unFoldObj=JSON.parse(sessionStorage.getItem('unFoldObj'))
                }
                if (el.clientHeight > num * rem) {
                    console.log(`超过了${this.line}行`);
                    this.$set(this.showUnfoldBtnObj,this.foldKey,true)
                    sessionStorage.setItem('showUnfoldBtnObj',JSON.stringify(this.showUnfoldBtnObj))
                    this.$set(this.unFoldObj,this.foldKey,true)
                    sessionStorage.setItem('unFoldObj',JSON.stringify(this.unFoldObj))
                }else {
                    console.log(`没超过${this.line}行`);
                    this.$set(this.showUnfoldBtnObj,this.foldKey,false)
                    sessionStorage.setItem('showUnfoldBtnObj',JSON.stringify(this.showUnfoldBtnObj))
                    this.$set(this.unFoldObj,this.foldKey,false)
                    sessionStorage.setItem('unFoldObj',JSON.stringify(this.unFoldObj))
                }
            },0)

        },
        handleFold(unFold){
            this.unFoldObj[unFold]=!this.unFoldObj[unFold]
        }
    }
}
</script>

<style lang="scss" scoped>
//公共类
@for $i from 2 through 4 {
  .ellipsis-#{$i} {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: #{$i};
    line-clamp: #{$i};
    -webkit-box-orient: vertical;
    line-height: normal;
  }
}
.unfold {
  color: #007aff;
  font-size: 28px;
  display: inline-block;
  padding: 10px;
  margin-left: -10px;
}
</style>
/单个可以用这个

<template>
  <div>
    <div
      class="text-wrapper"
      :class="showUnfoldButton && unFold ? ellipsisClass : ''"
    >
      <div v-html="text" class="fold-content"></div>
    </div>
    <div class="unfold" @click="handleFold()" v-if="showUnfoldButton">
      {{ foldText }}
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
    data() {
        return {
            showUnfoldButton:false,
            unFold:true,//折叠
            foldText:'展开'
        }
    },
    props:{
        //处理的文字、也可以是富文本
        text:{
            type:String,
            required:true,
            default:''
        },
        //超过几行显示省略号,先处理3行和4行的
        line:{
            type:Number,
            required:true,
            default:3
        },
    },
    computed:{
        ellipsisClass(){
            return 'ellipsis-'+this.line
        }
    },
    mounted(){
      this.calcLineHeight();
    },
    methods: {
        getRem () {
            const defaultRem = 16;
            let winWidth = window.innerWidth;
            return winWidth / 375 * defaultRem;
        },
        calcLineHeight(){
            setTimeout(()=>{
                const el =  document.querySelector('.fold-content');
                let rem = parseFloat(this.getRem());
                let num=this.line===4?5.25:4;//先处理3行和4行的
                if (el.clientHeight > num * rem) {
                    console.log(`超过了${this.line}行`);
                    this.showUnfoldButton=true;
                }else {
                    console.log(`没超过${this.line}行`);
                    this.showUnfoldButton=false
                }
            },0)
        },
        handleFold(){
            this.unFold=!this.unFold
            if(this.unFold){
                this.foldText='展开'
            }else {
                this.foldText='折叠'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
//公共类
@for $i from 2 through 4 {
  .ellipsis-#{$i} {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: #{$i};
    line-clamp: #{$i};
    -webkit-box-orient: vertical;
    line-height: normal;
  }
}
.unfold {
  color: #007aff;
  font-size: 28px;
  display: inline-block;
  padding: 10px;
  margin-left: -10px;
}
</style>