Vue .射流研究…实现垂直方向展开、收缩不定高度模块的射流研究…组件

需求分析：

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

点击红框前：

点击后：

难点分析：

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style .box { height:500px背景-颜色：黑色；飞越：隐藏；} .我的盒子-保持活动状态我的盒子-输入-激活{ transit :全1s ease} .我的盒子-保持活动状态我的盒子-输入{ height:0px！重要；} .我的盒子-离开我的盒子-输入-激活{高度： 500 px}/style/head dydiv id=' box '过渡名称='我的盒子' div class='盒子' v-show='盒子显示'/div/transition按钮@ click='切换盒子'按钮/button/div/body脚本src=' http :/bower _ components/Vue/dist/Vue。js '/script script new Vue({ El : ' # box }，data:{ boxshow:false }，methods : { toggle box : function(){ this。box show=！这个。盒子展示；} } });/script/html

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

解决方案：

1、实现一个函数式组件

本人命名为vertical-toggle.js//由萧蔷于2018年四月17日创作。const elTransition='0.3s '高度缓和，0.3s填充-顶部缓和，0.3s填充-底部缓和const Transition={ ' before-enter '(El){ El。风格。Transition=elTransition if(！埃尔。数据集)El。数据集={ } El。数据集。旧填充顶部=El。风格。填充顶部El。数据集。旧填充底部=El。风格。填充底部El。风格。高度=0 El。风格。顶部填充=0 El。风格。填充底部=0 }，“输入”(El){ El。数据集。旧溢出=El。风格。溢出if(El。滚动高度！==0){ El。风格。高度=El。滚动高度' px ' El。风格。填充顶部=El。数据集。旧衬垫顶部El。风格。填充底部=El。数据集。旧填充底部} else { El。风格。高度=' ' El。风格。填充顶部=El。风格。填充底部=El。数据集。旧衬垫底部} El。风格。overflow=' hidden ' }，' after-enter '(El){ El。风格。过渡=' ' El .埃尔。数据集)El。数据集={ } El。数据集。旧填充顶部=El。风格。填充顶部El。数据集。旧填充底部=El。风格。填充底部El。数据集。旧溢出=El。风格。溢出El。风格。高度=El。滚动高度' px ' El。风格。overflow=' hidden ' }，' leave' (el) { if (el.scrollHeight！==0){ El。风格。Transition=elTransition El。风格。高度=0 El。风格。顶部填充=0 El。风格。填充底部=0 }、“离开后”(El){ El。风格。过渡=' El。风格。高度=' El。风格。溢出=El。数据集。老溢出埃尔。风格。填充顶部=El。数据集。旧填充底部} }导出默认值{ name: ' VerticalToggle引用此组件

在成分中注册了此组件：

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

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

实现效果：

总结

以上是Vue的JS组件。JS，这是边肖给大家介绍的。希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！