VUE 文本内容超出规定行数后展开收起的方法

效果如图：

<template>
  <div class="community-introduction">
    <h3 class="house-title">小区介绍</h3>
    <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
      <div class="intro-content" :title="introduce" ref="desc">
        <span class="merchant-desc" v-if="introduce">
          {{ introduce }}
        </span>
        <div class="unfold" @click="showTotalIntro" v-if="showExchangeButton">
          <p>{{ exchangeButton ? "展开" : "收起" }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Spread",
  data() {
    return {
      title: "演示展开收起",
      introduce: "",
      // 是否展示所有文本内容
      showTotal: true,
      // 显示展开还是收起
      exchangeButton: true,
      // 是否显示展开收起按钮
      showExchangeButton: false,
      rem: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    showTotalIntro() {
      this.showTotal = !this.showTotal;
      this.exchangeButton = !this.exchangeButton;
    },
    getRem() {
      const defaultRem = 16;
      let winWidth = window.innerWidth;
      let rem = (winWidth / 375) * defaultRem;
      return rem;
    },
    init() {
      this.introduce =
        "该房产位于南码头路1136弄，属于浦东南码头板块，房屋总建筑面积76.37平米，两室一厅该该房产位于南码头路1136弄，属于76.37平米该房产位于南码头路1136弄，属于浦东南码头板块，房屋总建筑面积76.37平米，两室一厅该该房产位于南码头路1136弄，属于76.37平米该房产位于南码头路1136弄，属于浦东南码头板块，房屋总建筑面积76.37平米，两室一厅该该房产";
    },
  },
  watch: {
    introduce: function () {
      this.$nextTick(
        function () {
          console.log("nextTick");
          // 判断介绍是否超过四行
          let rem = parseFloat(this.getRem());
          if (!this.$refs.desc) {
            return;
          }
          let descHeight = window
            .getComputedStyle(this.$refs.desc)
            .height.replace("px", "");
          console.log("descHeight:" + descHeight);
          if (descHeight > 5.25 * rem) {
            console.log("超过了四行");
            // 显示展开收起按钮
            this.showExchangeButton = true;
            this.exchangeButton = true;
            // 不是显示所有
            this.showTotal = false;
          } else {
            // 不显示展开收起按钮
            this.showExchangeButton = false;
            // 没有超过四行就显示所有
            this.showTotal = true;
            console.log("showExchangeButton", this.showExchangeButton);
            console.log("showTotal", this.showTotal);
          }
        }.bind(this)
      );
    },
  },
};
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.community-introduction {
  padding: 0.5rem 0;
  .total-introduce {
    height: auto;
    overflow: hidden;
    font-size: 0.3rem;
    color: #333333;
    margin-top: .2rem;
    .intro-content {
      .merchant-desc {
        width: 100%;
        line-height: 0.42rem;
      }
    }
    .unfold {
      display: block;
      z-index: 11;
      float: right;
      width: 40px;
      height: 0.42rem;
      p {
        margin: 0;
        line-height: 0.42rem;
        color: #6a9ff6;
      }
    }
  }
  .detailed-introduce {
    font-size: 0.3rem;
    color: #333333;
    position: relative;
    overflow: hidden;
    margin-top: .2rem;
    .intro-content {
      // 最大高度设为4倍的行间距
      max-height: 1.26rem;
      line-height: 0.42rem;
      word-wrap: break-word;
      /*强制打散字符*/
      word-break: break-all;
      background: #ffffff;
      /*同背景色*/
      color: #ffffff;
      overflow: hidden;
      .merchant-desc {
        width: 100%;
        line-height: 0.42rem;
      }
      &:after,
  // 这是展开前实际显示的内容
  &:before {
        content: attr(title);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        color: #333333;
        // overflow: hidden;
      }
      // 把最后最后一行自身的上面三行遮住
      &:before {
        display: block;
        overflow: hidden;
        z-index: 1;
        max-height: 0.82rem;
        background: #ffffff;
      }
      &:after {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 1.24rem;
        /*截取行数*/
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        /*行首缩进字符数，值为[(截取行数-1)*尾部留空字符数]*/
        text-indent: -12em;
        /*尾部留空字符数*/
        padding-right: 4em;
      }
      .unfold {
        z-index: 11;
        width: 40px;
        height: 0.42rem;
        outline: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        p {
          margin: 0;
          line-height: 0.42rem;
          color: #6a9ff6;
        }
      }
    }
  }
}
</style>