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

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

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

       我们可以简单分析一下：

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

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

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

    
{{ content.name }}
    
{{ content.releaseDate | date }}
    
    

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

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

    
    

        

            
                
                

            
        
    

    

        {{ showMore ? '收起' : '显示更多'}}
    

       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值来控制显示的高度值。

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