Vue 实现展开折叠效果的示例代码

这篇文章主要介绍了Vue 实现展开折叠效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了Vue 实现展开折叠效果的示例代码，分享给大家，具体如下：

效果如见：

1.html代码

  js文本段落展开和收拢效果    这一段文字是可以折叠展开的，点击下面的“更多”就可以展开，点击下面的“折叠”就可以折叠

2.js代码，最关键的

 $(function() { var slideHeight = 45; // px 定义折叠的最小高度 var defHeight = $('#wrap').height(); if(defHeight >= slideHeight) { $('#wrap').css('height', slideHeight + 'px'); $('#read-more').append('更多'); $('#read-more a').click(function() { var curHeight = $('#wrap').height(); if(curHeight == slideHeight) { $('#wrap').animate({ height: defHeight }, "normal"); $('#read-more a').html('折叠'); } else { $('#wrap').animate({ height: slideHeight }, "normal"); $('#read-more a').html('更多'); } return false; }); } });

3.css代码

 #container { margin: 0 auto; width: 600px; border: 1px solid #3bb2d0; } #wrap { position: relative; padding: 10px; overflow: hidden; } #read-more { padding: 5px; background: #fff; color: #333; } #read-more a { padding-right: 22px; no-repeat 100% 50%; font-weight: bold; text-decoration: none; } #read-more a: hover { color: #000; }

除了使用jQuery的方式实现上述效果，同样可以在Vue实现，下面是解决办法：

1、创建collapse.js文件

 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: "collapseTransition", functional: true, render(h, { children }) { const data = { on: Transition }; return h("transition", data, children); } };

2、在.vue组件中引入

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。

以上就是Vue 实现展开折叠效果的示例代码的详细内容，更多请关注0133技术站其它相关文章！