vue 文本超过2行展示更多：列表做法、单个文本做法_vue超过高度显示更多

<template>
  <div>
    <div class="group">
      <div class="text more" ref="more">占位</div>
      <div class="list" v-for="(item, index) in historyList" :key="index">
 
        <div
          class="text"
          ref="textContainer"
          :class="{ retract: item.status }"
          :style="{ 'max-height': item.status ? textHeight : '' }"
        >
          {{item.content }}
        </div>
        <span v-if="item.status !== null" class="link" @click="more(index)">{{
              item.status ? "展开" : "收起"
            }}</span>
      </div>
    </div>
  </div>
</template>
<script>
    import {  Col, Row } from "vant";
    export default {
        data() {
            return {
                textHeight: "",
                content:"-1听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐;-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐",
                historyList: [
                    {
                        version: "7.1.4",
                        title: "本次更新",
                        content:
                            "-2听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐;-听模块新增“文章难度分析”功能~,为你分析文章中词汇、语速等难度，推荐",
                        time: "2周前",
                    },
                ],
            };
        },
        components: {
            [Row.name]: Row,
            [Col.name]: Col,
        },
        mounted() {
            this.historyList.forEach((ele, index) => {
                this.$set( this.historyList, index, Object.assign({ }, ele, {  status: null }) );
            });
            // DOM 加载完执行
            this.$nextTick(() => {
                this.calculateText();
                //console.log(this.historyList)
            });
            window.onresize = () => {
                this.historyList.forEach((ele, index) => {
                    this.$set(
                        this.historyList,
                        index,
                        Object.assign({ }, ele, {  status: null })
                    );
                });
                setTimeout(() => {
                    this.calculateText();
                }, 0);
            };
        },
        methods: {
            // 计算文字 显示展开 收起
            calculateText() {
                // 获取一行文字的height 计算当前文字比较列表文字
                let oneHeight = this.$refs.more.scrollHeight;
                let twoHeight = oneHeight * 1 || 40;
                this.textHeight = `${ twoHeight}px`;
                let txtDom = this.$refs.textContainer;
                for (let i = 0; i < txtDom.length; i++) {
                    let curHeight = txtDom[i].offsetHeight;
                    if (curHeight > twoHeight) {
                        this.$set(
                            this.historyList,
                            i,
                            Object.assign({ }, this.historyList[i], {  status: true })
                        );
                    } else {
                        this.$set(
                            this.historyList,
                            i,
                            Object.assign({ }, this.historyList[i], {  status: null })
                        );
                    }
                }
            },
            more(index) {
                this.historyList[index].status = !this.historyList[index].status;
            },
        },
    };
</script>
<style lang="less" scoped>
  .group {
 
    .text {
      position: relative;
      color: #000;
      font-size: 14px;
    }
    .more {
      visibility: hidden;
    }
    .link {
      font-size: 12px;
      color: #2d95fe;
    }
    .retract {
      position: relative;
      overflow: hidden;
    }
    .retract:after {
      content: "...";
      position: absolute;
      bottom: 0;
      right: 2px;
      width: 25px;
      padding-left: 25px;
      background: linear-gradient(to right, transparent, #fff 45%);
    }
  }
</style>

vue 文本超过2行展示更多：单个文本做法

    <template>
      <div>
        <div class="group">
          <div class="text2 more2" ref="more2">占位不可删除</div>
          <div class="list2">
            <div
              class="text2"
              ref="textContainer2"
              :class="{ retract2: testObj }"
              :style="{ 'max-height': testObj ? textHeight2 : '' }"
            >
              { {  name }}
            </div>
            <span v-if="testObj" class="link2" @click="moreBtn()"></span>
          </div>
        </div>
      </div>
    </template>
    <script>
    import {  Col, Row } from "vant";
    export default { 
      data() { 
        return { 
          textHeight2: "",
          testObj: false,
          name: "1啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊1啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",
        };
      },
      components: { 
        [Row.name]: Row,
        [Col.name]: Col,
      },
      mounted() { 
        let that = this;
        this.testObj = false; // this.$set(this.testObj, "status2", ""); //1
        this.$nextTick(() => { 
          that.calculateTextNew(); // DOM 加载完执行
        });
        window.onresize = () => { 
          that.testObj = false; // this.$set(this.testObj, "status2", ""); //1
          setTimeout(() => { 
            that.calculateTextNew(); //1
          }, 0);
        };
      },
      methods: { 
        // 计算文字 显示展开 收起 
        calculateTextNew() { 
          let oneHeight = this.$refs.more2.scrollHeight; // 获取一行文字的height 计算当前文字比较列表文字
          let twoHeight = oneHeight * 2; // 2行文字高度
          this.textHeight2 = `${ twoHeight}px`; // 2行文本高度px
          let txtDom = this.$refs.textContainer2; //获取总文本
          let curHeight = txtDom.offsetHeight; // 获取总文本高度
          // 若总文本高度，大于两行文本高度 展示更多按钮 的样式
          if (curHeight > twoHeight) { 
            this.testObj = true; // 展示 // this.$set(this.testObj, Object.assign(this.testObj, { status2: true }));
          } else { 
            this.testObj = false; // 隐藏 // this.$set(this.testObj, Object.assign(this.testObj, { status2: null }));
          }
        },
        // 展开
        moreBtn() { 
          this.testObj = !this.testObj;
          console.log(this.testObj.status2);
        },
      },
    };
    </script>
    <style lang="less" scoped>
    .list2 { 
      padding: 5px 20px;
      border-bottom: 1px solid #eaeaea;
      position: relative;
    }
    .text2 { 
      position: relative;
      color: #000;
      font-size: 14px;
    }
    .more2 { 
      visibility: hidden;
    }
    .link2 { 
      position: absolute;
      right: 30px;
      bottom: 14px;
      font-size: 12px;
      color: #2d95fe;
      width: 20px;
      height: 20px;
      transform: rotate(45deg);
      border-width: 0px 2px 2px 0px;
      border-color: red;
      border-style: solid;
    }
    .retract2 { 
      position: relative;
      overflow: hidden;
    }
    .retract2:after { 
      content: "...";
      position: absolute;
      bottom: 0;
      right: 2px;
      width: 60px;
      padding-left: 25px;
      background: linear-gradient(to right, transparent, #fff 45%);
    }
    </style>