vue3项目只展示三行文本,超过显示展开全部按钮

代码:

<template>
  <div class="content-wrap">
    <div :class="['content', expande ? 'expande' : 'close']" ref="content">
      {{ summary }}
    </div>
    <div class="expande-button-wrap" v-if="needShowExpande">
      <div class="expande-button" @click="expandeClick" v-if="!expande">
        展开
      </div>
      <div class="expande-button" @click="expandeClick" v-else>收起</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      expande: true,
      needShowExpande: false,
      summary:
        "内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
    };
  },
  mounted() {
    this.summaryHeight();
  },
  methods: {
    expandeClick() {
      this.expande = !this.expande;
    },
    summaryHeight() {
      this.$nextTick(() => {
        let lineHeight = 22;
        console.log(this.$refs.content.offsetHeight);
        if (this.$refs.content.offsetHeight > lineHeight * 3) {
          this.expande = false;
          this.needShowExpande = true;
        } else {
          this.expande = true;
        }
      });
    },
  },
};
</script>

<style>
.content {
  font-size: 14px;
  color: black;
  letter-spacing: 0;
  line-height: 22px;
  text-align: justify;
  overflow: hidden;
  /* display: -webkit-box; */
  /* -webkit-line-clamp: 3;
        -webkit-box-orient: vertical; */
  /* text-overflow: ellipsis; */
}

.expande {
  overflow: auto;
  height: auto;
  padding-bottom: 22px;
}

.close {
  word-break: break-all;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  /*overflow: hidden;
        height: 66px;
        padding-bottom: 0;*/
}

.expande-button-wrap {
  bottom: 0;
  right: 0;
  height: 22px;
  background: white;
}

.expande-button {
  text-align: right;
  vertical-align: middle;
  color: #5995ef;
  font-size: 14px;
  line-height: 22px;
}
</style>