vue 组件隐藏内容，点击展示更多功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 组件隐藏内容，点击展示更多功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图

vue 组件隐藏内容，点击展示更多功能文章来源地址https://www.toymoban.com/news/detail-441624.html

代码

<template>
  <div class="m-text-overflow modules">
    <div class="l-content" :style="contentStyle">
      <div ref="refContent">
        <slot>
          <span v-html="content"> </span>
        </slot>
      </div>
    </div>
    <div class="l-show-more" v-if="isClose">
      <div class="l-show-more__text" @click="handleShowMore">
        <slot name="showMore">
          {{ showMoreText }}
        </slot>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
/**
 * @Description 文本内容溢出组件
 * @property {string} content 要展示的文本内容
 * @property {number} height 要默认展示内容的高度
 * @property {string} showMoreText 点击显示更多的文本
 */
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
  components: {},
})
export default class MTextOverflow extends Vue {
  /** 要展示的文本内容 */
  @Prop({ default: '' }) protected content!: string;
  /** 要默认展示内容的高度 */
  @Prop({ default: 100 }) protected height!: number;
  /** 要展示的文本内容 */
  @Prop({ default: '点击查看更多' }) protected showMoreText!: string;
  /**
   *  状态
   *  open 内容已展开
   *  close 内容已收起
   */
  status: 'open' | 'close' = 'close';
  /** 观察内容变化的对象 */
  mutationObserver: MutationObserver | null = null;

  get isOpen(): boolean {
    return this.status === 'open';
  }

  get isClose(): boolean {
    return this.status === 'close';
  }

  get contentStyle() {
    if (this.isClose) {
      return {
        height: `${this.height}px`,
      };
    }

    return {};
  }

  mounted() {
    this.handleContent();
    /** 监听内容变化，然后处理要不要显示展开按钮逻辑 */
    this.mutationObserver = new MutationObserver(() => {
      this.handleContent();
    });

    if (this.$refs.refContent) {
      this.mutationObserver.observe(this.$refs.refContent as Element, {
        childList: true,
        attributes: true,
        characterData: true,
        subtree: true,
      });
    }
  }

  /** 处理内容要不要展示显示更多逻辑 */
  handleContent() {
    if ((this.$refs.refContent as Element).getBoundingClientRect().height > this.height) {
      this.status = 'close';
    } else {
      this.status = 'open';
    }
  }

  handleShowMore() {
    this.status = 'open';
  }

  destroyed() {
    this.mutationObserver?.disconnect();
  }
}
</script>
<style lang="scss" scoped>
.m-text-overflow.modules {
  background: #f7f7f7;
  padding: 16rpx;
  position: relative;
  .l {
    &-content {
      overflow: hidden;
    }

    &-show-more {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      padding-top: 40rpx;
      background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
      z-index: 10;

      &__text {
        display: inline-block;
        cursor: pointer;
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>

```