当前位置：首页 > VUE

vue实现折叠效果

2026-01-16 17:56:23VUE

使用 `v-show` 或 `v-if` 实现基础折叠

通过 Vue 的指令 v-show 或 v-if 控制元素的显示与隐藏。v-show 通过 CSS 的 display 属性切换，v-if 直接操作 DOM。

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">切换折叠</button>
    <div v-show="!isCollapsed">可折叠的内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    };
  }
};
</script>

结合 CSS 过渡动画

通过 Vue 的 <transition> 组件和 CSS 实现平滑的折叠动画效果。

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">切换折叠</button>
    <transition name="slide">
      <div v-show="!isCollapsed" class="content">带动画的折叠内容</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    };
  }
};
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.5s ease;
}
.slide-enter-from, .slide-leave-to {
  max-height: 0;
  overflow: hidden;
}
.slide-enter-to, .slide-leave-from {
  max-height: 1000px;
}
.content {
  overflow: hidden;
}
</style>

使用第三方库（如 `vue-collapse`）

对于更复杂的折叠需求，可以集成第三方库如 vue-collapse，提供更多功能（如手风琴效果）。

安装库：

npm install vue-collapse

示例代码：

<template>
  <div>
    <vue-collapse v-model="activePanels">
      <vue-collapse-item title="标题1" name="1">内容1</vue-collapse-item>
      <vue-collapse-item title="标题2" name="2">内容2</vue-collapse-item>
    </vue-collapse>
  </div>
</template>

<script>
import { VueCollapse, VueCollapseItem } from 'vue-collapse';

export default {
  components: { VueCollapse, VueCollapseItem },
  data() {
    return {
      activePanels: ['1']
    };
  }
};
</script>

动态生成折叠面板

通过 v-for 动态渲染多个折叠项，并管理各自的状态。

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <button @click="toggleItem(index)">{{ item.title }}</button>
      <div v-show="item.isOpen">{{ item.content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: '标题1', content: '内容1', isOpen: false },
        { title: '标题2', content: '内容2', isOpen: false }
      ]
    };
  },
  methods: {
    toggleItem(index) {
      this.items[index].isOpen = !this.items[index].isOpen;
    }
  }
};
</script>

手风琴效果（单一展开）

确保每次只展开一个折叠项，通过维护当前展开的索引实现。

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <button @click="setActive(index)">{{ item.title }}</button>
      <div v-show="activeIndex === index">{{ item.content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: null,
      items: [
        { title: '标题1', content: '内容1' },
        { title: '标题2', content: '内容2' }
      ]
    };
  },
  methods: {
    setActive(index) {
      this.activeIndex = this.activeIndex === index ? null : index;
    }
  }
};
</script>

vue实现折叠效果