demo地址：

https://github.com/XieTongXue/how-to/tree/master/vertical-toggle

需求分析：

如图，有很多高度不固定的模块（图中只显示两个，本人项目有十三个），点击模块标题展开相应的模块，再次点击此模块匿藏，如何实现此需求并实现复用？
点击红框前：

点击后：

难点分析:

模块高度不固定。

解决方案：

1、实现一个函数式组件

本人命名为vertical-toggle.js

// Created by xiaoqiang on 17/04/2018.
const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'
const Transition = {
  'before-enter' (el) {
    el.style.transition = elTransition
    if (!el.dataset) el.dataset = {}

    el.dataset.oldPaddingTop = el.style.paddingTop
    el.dataset.oldPaddingBottom = el.style.paddingBottom

    el.style.height = 0
    el.style.paddingTop = 0
    el.style.paddingBottom = 0
  },

  'enter' (el) {
    el.dataset.oldOverflow = el.style.overflow
    if (el.scrollHeight !== 0) {
      el.style.height = el.scrollHeight + 'px'
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    } else {
      el.style.height = ''
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    }

    el.style.overflow = 'hidden'
  },

  'after-enter' (el) {
    el.style.transition = ''
    el.style.height = ''
    el.style.overflow = el.dataset.oldOverflow
  },

  'before-leave' (el) {
    if (!el.dataset) el.dataset = {}
    el.dataset.oldPaddingTop = el.style.paddingTop
    el.dataset.oldPaddingBottom = el.style.paddingBottom
    el.dataset.oldOverflow = el.style.overflow

    el.style.height = el.scrollHeight + 'px'
    el.style.overflow = 'hidden'
  },

  'leave' (el) {
    if (el.scrollHeight !== 0) {
      el.style.transition = elTransition
      el.style.height = 0
      el.style.paddingTop = 0
      el.style.paddingBottom = 0
    }
  },

  'after-leave' (el) {
    el.style.transition = ''
    el.style.height = ''
    el.style.overflow = el.dataset.oldOverflow
    el.style.paddingTop = el.dataset.oldPaddingTop
    el.style.paddingBottom = el.dataset.oldPaddingBottom
  }
}

export default {
  name: 'VerticalToggle',
  functional: true,
  render (h, { children }) {
    const data = {
      on: Transition
    }
    return h('transition', data, children)
  }
}

#####2、引用此组件

import VerticalToggle from '@/components/Common/VerticalToggle/vertical-toggle.js'

在components中注册此组件：

  components: {
    VerticalToggle
  }

data，用于控制显示隐藏：

本demo默认content1收缩，content2展开。

  data () {
    return {
      content1Show: false,
      content2Show: true
    }
  }

在teamplate中引用：

title为点击控制区域，vertical-toggle包裹部分为可不定高度收缩区域。

    <div class="VerticalToggleTest">
      <h2>垂直滑动组件使用方法:</h2>
      <div class="item item1">
        <div class="title" @click="content1Show = !content1Show">标题1</div>
        <vertical-toggle>
          <div class="content-1" v-show="content1Show"></div>
        </vertical-toggle>
      </div>
      <div class="item item2">
        <div class="title" @click="content2Show = !content2Show">标题2</div>
        <vertical-toggle>
          <div class="content-2" v-show="content2Show"></div>
        </vertical-toggle>
      </div>
    </div>

至此，Vue.js实现垂直展开、收缩不定高度模块组件实现完成及应用均已完成。
实现demo效果如文章开头所示。