vue3项目只展示三行文本,超过显示展开全部按钮_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>