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

最新推荐文章于 2024-07-30 16:47:11 发布

随风自逍遥

最新推荐文章于 2024-07-30 16:47:11 发布

阅读量325

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Yyh18055242681/article/details/135045504

版权

代码:

<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>