@H_4030@

需求分析：

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

@H_403_0@点击红框前：

@H_403_0@点击后：

@H_403_0@

难点分析:

@H_403_0@模块高度不固定。比如，本人一开始想到的方法如下：

@H_403_0@这种方法确实可以实现点击展开，再次点击收缩的需求，但是有一个明显的缺点：限定了容器的高度，也就是每个模块都需要固定高度，并不适用于需求场景。

@H_403_0@

解决方案：

@H_403_0@

1、实现一个函数式组件

<div class="jb51code">
<pre class="brush:js;">
本人命名为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)
}
}