关于Vue.JS实现垂直方向展开和收缩不定高度模块的JS组件办法

web前端|js教程

vue.js垂直展开,vue.js,收缩,高度,vue.js,js组件

web前端-js教程需求分析：

laysns源码下载,ubuntu更换pip源,爬虫数据公司被,php cli开发,seo能做网站lzw

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

织梦如何仿手机网站源码,vscode加快下载速度,ubuntu trm终端,卸载tomcat服务失败,c 爬虫 qt,php7开启pdo,麒麟seo基本结构图,织梦软件开发网站模板下载,陶瓷网站模板下载lzw

点击红框前：

asp源码怎么导入dw,vscode没报错,ubuntu eog,图片上传tomcat,多库sqlite查询,淘宝工具栏插件,后端学什么前端框架快,撒旦是外星爬虫人,php 打开空白,邢台谷歌seo公司,有什么电影资源的网站源码,安卓版取gbk网页源码,投票网页模板下载lzw

点击后：

难点分析:

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

.box{height:500px;background-color:black; overflow: hidden;} .mybox-leave-active,.mybox-enter-active{transition: all 1s ease;} .mybox-leave-active,.mybox-enter{height:0px !important; } .mybox-leave,.mybox-enter-active{height: 500px; }

按钮

new Vue({ el:#box, data:{boxshow:false }, methods:{togglebox:function(){ this.boxshow = !this.boxshow;} }});

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

解决方案：

1、实现一个函数式组件

本人命名为vertical-toggle.js// Created by xiaoqiang on 17/04/.const elTransition = .3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-outconst Transition = { efore-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 }, efore-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( ransition, data, children) }}

2、引用此组件

在components中注册了此组件：

即可在teamplate中引用，请留意红框文字说明部分。

至此，Vue.js实现垂直展开、收缩不定高度模块组件实现完成及应用均已完成。

实现效果：