【vue】实现超过两行或多行显示展开收起 (单个展开收起和数组多个展开收起)

1.单个展开收起

1.实现功能如下图：

2.代码

1.html代码

<div class="top">
      <span
        :style="{ 'max-height': textOpenFlag ? textHeight : '' }"
        :class="{ unfoldText: textOpenFlag }"
        class="titleText"
        ref="textContainer"
      >
        调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表调查问卷表
      </span>
      <span
        v-if="showBtnFlag"
        @click="textOpenFlag = !textOpenFlag"
        class="btn"
        >{{ textOpenFlag ? "展开" : "收起" }}</span
      >
</div>

2. js 代码

data () {
  return {
	 textHeight: '',  // 想要显示的高度
     textOpenFlag: false,  // 展开/收起 判定
     showBtnFlag: false,  // 是否显示展开收起
  }
},
mounted() {
   this.$nextTick(() => {
      setTimeout(() => {
       this.showAllText ();
     }, 300);
  });
},
methods: {
  showAllText () {
     // 默认展示两行数据的高度，20是一行的高度可以自定义 *2 表示展示两行 如果想要显示n行就*n
      let twoHeight = 20 * 2;
      this.textHeight = `${twoHeight}px`;
      let curHeight = this.$refs.textContainer.offsetHeight;
      if (curHeight > twoHeight) {
        this.textOpenFlag = true;
        this.showBtnFlag = true;
      } else {
        this.textOpenFlag = false;
        this.showBtnFlag = false;
      }
  }
}

3. css代码

.top{
	  font-size: 14px;
      color: #333333;
      position: relative;
      .hiddenText {
        overflow: hidden;
        display: block;
      }
      .hiddenText:after {
        z-index: 3;
        content: "...";
        position: absolute;
        bottom: 2px;
        right: 55px;
        width: 14px;
        padding-left: 15px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.1), #fff 45%);
      }
	 .btnMore{
	   color: #34B7B9;
	   position: absolute;
	   right: 0;
	   bottom: 0;
	   background-color: #fff;
	}
}

2.多个情况展示

1. html代码

<div class="more" v-for="(item, index) in moreList" :key="item.index">
    <div class="top">
       <span
         :style="{'max-height': item.textOpenFlag ? textHeight : ''}"
         :class="{hiddenText: item.textOpenFlag}"
          class="textMore"
          ref="textContainer"
        >{{moreListName[index].join('、')}}</span>
       <span
         v-if="item.textOpenFlag !== null"
         @click="item.textOpenFlag = !item.textOpenFlag"
         class="btnMore"
       >{{item.textOpenFlag ? '【展开】':'【收起】'}}</span>
   </div>
   <div class="bottom">
      <div class="time">
         <span>{{moment(item.paidAt * 1000).format('YYYY-MM-DD hh:mm')}}</span>
         <span>￥{{item.price}}</span>
      </div>
     <div class="app">仅支持在APP中测试</div>
  </div>
 </div>

2. js 代码

data () {
  return {
  	 moreList: [],   // 数据数组
	 textHeight: '',  // 想要显示的高度
     textOpenFlag: false,  // 展开/收起 判定
     showBtnFlag: false,  // 是否显示展开收起
  }
},
mounted() {
   this.getTableList()  // 调用后端获取数据
},
methods: {
  async getTableList () {
      const res = await getIndividual({ page: -1, pageSize: 10 })
      this.moreList = res.data.records   //后端获取数据赋值给数组
      this.moreList.forEach((ele, index) => {
        this.$set(  // 给获取到的数组数据  添加属性来判定 展示/收起
          this.moreList,
          index,
          Object.assign({}, ele, { textOpenFlag: null })
        )
      })
      this.$nextTick(() => {
        this.showTextAll()
      })
    },
  showTextAll () {
      // 默认展示两行数据的高度，20是一行的高度可以自定义 *2 表示展示两行 如果想要显示n行就*n
      const twoHeight = 20 * 2
      this.textHeight = `${twoHeight}px`
      const txtDom = this.$refs.textContainer
      for (let i = 0; i < txtDom.length; i++) {
        const curHeight = txtDom[i].offsetHeight
        if (curHeight > twoHeight) {
          this.$set(
            this.moreList,
            i,
            Object.assign({}, this.moreList[i], { textOpenFlag: true })
          )
        } else {
          this.$set(
            this.moreList,
            i,                              // 如果高度够的话就为null 不显示展示/收起按钮
            Object.assign({}, this.moreList[i], { textOpenFlag: null })  
          )
        }
      }
   }
}

css代码和单个情况的css样式一样，如上所示 不需要改动