这篇文章主要介绍了Vue 实现展开折叠效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了Vue 实现展开折叠效果的示例代码，分享给大家，具体如下：
效果如见：
1.html代码
<title>js文本段落展开和收拢效果</title> <div id="container"> <div id="wrap"> <div> <h1>这一段文字是可以折叠展开的，点击下面的“更多”就可以展开，点击下面的“折叠”就可以折叠</h1></div></div><div id="read-more"></div></div>
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: #0<b style="color:transparent">本文来源gao@!dai!ma.com搞$$代^@码!网!</b>00; }
除了使用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组件中引入
<div class="container"> <button>展开/折叠</button> <div class="container"> <h2>欢迎大家品尝Pizza!</h2><h5>这里有你非常喜欢的Pizza!</h5></div></div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是Vue 实现展开折叠效果的示例代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue 实现展开折叠效果的示例代码
转载请注明原文链接：Vue 实现展开折叠效果的示例代码
