Vue.js+Element UI实现“显示更多”和“收起”效果

版权声明：转载请注明出处 https://blog.csdn.net/YoshinoNanjo/article/details/81910805

       首先我们来看一下CSDN中的“显示更多”的效果，如下图所示：

       当我们点击“阅读更多”时，将展开剩余内容。

       我们可以简单分析一下：

1. 内容是从后台一次性获取到的，不存在点击“阅读更多”再去请求一次后台获取剩余数据的可能；
2. 通过第一步其实可以得出，CSDN是通过控制显示元素的高度来实现这一功能，而非控制内容的获取；
3. 可以看到“阅读更多”按钮上有一层渐变遮罩层，CSDN通过这一遮罩遮住剩余内容。

       结合自己所做的项目，先展示一下未实现“显示更多”效果时的效果图：

       可以看到目前该篇文章的高度是231px，那如果我只显示200px，剩下31px隐藏起来，那其实就是达到了“显示更多”的效果。先看一下上图的源代码：

<div>
    <div class="title">{{ content.name }}</div>
    <div class="date">{{ content.releaseDate | date }}</div>
    <!-- 我这里的 showHeight 值是 200，contentTxt 是个富文本 -->
    <show-more style="margin-top: 20px" :showHeight="showHeight" :content="contentTxt"></show-more>
</div>

       在这里为了把“显示更多”做的更通用些，我把它封装成了一个组件，传入两个参数：showHeight用于控制显示的高度（类似上文的200px），content用于展示内容。

       接下来我们去ShowMore组件中看一下到底是如何把内容隐藏一部分的，上代码：

<div class="wrapper-container">
    <!-- overflow: hidden：清除子元素相对父元素的超界溢出 -->
    <div style="overflow: hidden" :style="{height : showMore ? 'auto': showHeight + 'px'}">
        <div ref="content">
            <slot>
                <!-- 当外界 <show-more> 标签中有元素时，使用 <show-more> 标签中的元素进行渲染，否则使用下面这个 div 进行渲染 -->
                <div v-html="content"></div>
            </slot>
        </div>
    </div>

    <div class="control" v-show="isLongContent" :class="{'show-more' : showMore}">
        <el-button type="text" @click="_toggleShowMore">{{ showMore ? '收起' : '显示更多'}}</el-button>
    </div>
</div>

       JavaScript代码：

export default {
    props: {
      showHeight: {
        type: Number,
        required: true,
        default: 200
      },
      content: {
        type: String,
        default: null
      }
    },
    data () {
      return {
        showMore: false,
        isLongContent: false
      }
    },
    watch: {
      // 每当内容变化时都重新计算一次高度
      content () {
        this._calculateHeight()
      }
    },
    methods: {
      refresh () {
        this._calculateHeight()
      },
      _calculateHeight () {
        // $nextTick()，等待内容获取完毕再计算高度，异步处理
        this.$nextTick().then(() => {
          let contentHeight = this.$refs.content.clientHeight
          if (contentHeight > this.showHeight) {
            this.isLongContent = true
          } else {
            this.isLongContent = false
          }
        })
      },
      _toggleShowMore () {
        this.showMore = !this.showMore
      }
    }
  }

       CSS代码：

.wrapper-container {
    position: relative;
    padding-bottom: 40px;

    .control {
        // [滑稽]这里的代码是从 CSDN 那复制过来的，毕竟人家的渐变遮罩层写好了我就不重复发明轮子了
        position: absolute;
        bottom: 0;
        width: 100%;
        padding-top: 40px;
        text-align: center;
        background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 70%);

        &.show-more {
            padding-top: 0;
            background: none;
        }
    }
}

       看下最终效果：

       默认的显示高度是200px，可以通过更改showHeight值来控制显示的高度值。

       点击“显示更多”按钮后的效果：