Vue 实现展开折叠效果

亦凉 2022-03-01 09:47 838阅读 0赞

## Vue 实现展开折叠效果 ##

`效果参见：https://segmentfault.com/q/1010000011359250/a-1020000011360185`

上述链接中，大佬给除了解决方法，再次进行总结，方便以后使用。

> 除了使用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组件中引入 ####

<template>
        <div class="container">
            <button @click="isActive = !isActive">展开/折叠</button>
            <collapse>
                <div class="container" v-show="isActive">
                    <h2>欢迎大家品尝Pizza!</h2>
                    <h5>这里有你非常喜欢的Pizza!</h5>
                </div>
            </collapse>
        </div>
    </template>
    <script>
    import collapse from "../assets/js/collapse.js";
    export default {
      data() {
        return {
          isActive: false
        };
      },
      components: {
        collapse
      }
    };
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，838人围观）

还没有评论，来说两句吧...

相关阅读

相关基于vue手动实现折叠面板（展开一项，其他项收起）

首先感谢博主的分享，原文链接：`https://blog.csdn.net/weixin_42024362/article/details/80519987` 先上效果图：

灰太狼/ 2022年12月17日 07:26/ 0 赞/ 351 阅读

相关展开和折叠项

这个是用列表来制作的简单的折叠效果。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

清疚/ 2022年09月27日 15:29/ 0 赞/ 204 阅读

相关 ElementUI--原理--折叠展开动画

原文网址：[ElementUI--原理--折叠展开动画\_IT利刃出鞘的博客-CSDN博客][ElementUI--_--_IT_-CSDN] 其他网址 [elemen

Dear 丶/ 2022年09月03日 05:25/ 0 赞/ 246 阅读

相关 js实现侧边导航栏展开和折叠

效果：左侧导航栏，点击展开，显示子菜单。再次点击，菜单折叠。代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

╰半夏微凉°/ 2022年08月23日 05:46/ 0 赞/ 328 阅读

相关 UI--多行文本折叠展开效果

1.概述　　经常在APP中能看到有引用文章或大段博文的内容，他们的展示样式也有点儿意思，默认是折叠的，当你点击文章之后它会自动展开。再次点击他又会缩回去。　　网

短命女/ 2022年08月19日 12:13/ 0 赞/ 219 阅读

相关 EasyUI tree 实现点击展开/折叠

$('tt').tree( { url : 'getTree.do', animate: true, onClick:

冷不防/ 2022年06月04日 02:24/ 0 赞/ 340 阅读

相关 uni-app中文本过长-实现折叠与展开效果

在实际的开发中,疑或是页面的预览中,或多或少都碰到过这样的情景,那就是文本的折叠与展开!近期在做一个项目，也遇到此情况，就将此顺便总结下来~ 一、先上效果 ![

旧城等待，/ 2022年05月21日 12:56/ 0 赞/ 948 阅读

相关 Vue 实现展开折叠效果

Vue 实现展开折叠效果 `效果参见：https://segmentfault.com/q/1010000011359250/a-1020000011360185` 上

亦凉/ 2022年03月01日 09:47/ 0 赞/ 839 阅读

相关 vue 实现折叠面板

效果图 ![在这里插入图片描述][20200518095018220.gif_pic_center] 思路其实说是折叠效果，关键是数据的处理， 1：第一行开头

忘是亡心i/ 2021年08月30日 01:50/ 0 赞/ 754 阅读

相关 css实现折叠卡片效果

![20200528133922159.gif][] 文字和视频什么的可以自己改变 HTML： <!DOCTYPE html> <html lang="

女爷i/ 2021年07月26日 16:03/ 0 赞/ 582 阅读