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 = elTransitionif (!el.dataset) el.dataset = {}el.dataset.oldPaddingTop = el.style.paddingTopel.dataset.oldPaddingBottom = el.style.paddingBottomel.style.height = 0el.style.paddingTop = 0el.style.paddingBottom = 0},'enter' (el) {el.dataset.oldOverflow = el.style.overflowif (el.scrollHeight !== 0) {el.style.height = el.scrollHeight + 'px'el.style.paddingTop = el.dataset.oldPaddingTopel.style.paddingBottom = el.dataset.oldPaddingBottom} else {el.style.height = ''el.style.paddingTop = el.dataset.oldPaddingTopel.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.paddingTopel.dataset.oldPaddingBottom = el.style.paddingBottomel.dataset.oldOverflow = el.style.overflowel.style.height = el.scrollHeight + 'px'el.style.overflow = 'hidden'},'leave' (el) {if (el.scrollHeight !== 0) {el.style.transition = elTransitionel.style.height = 0el.style.paddingTop = 0el.style.paddingBottom = 0}},'after-leave' (el) {el.style.transition = ''el.style.height = ''el.style.overflow = el.dataset.oldOverflowel.style.paddingTop = el.dataset.oldPaddingTopel.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效果如文章開頭所示。

總結

以上是生活随笔為你收集整理的Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。