当前位置：首页 > VUE

vue实现折叠层

2026-02-17 05:03:06VUE

实现折叠层的基本思路

在Vue中实现折叠层效果可以通过动态控制CSS类或样式，结合Vue的响应式特性完成。主要利用v-show或v-if指令控制元素显示隐藏，通过过渡效果实现平滑动画。

使用v-show控制显示隐藏

通过数据属性绑定v-show，点击按钮切换布尔值实现折叠展开：

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>
    <div v-show="!isCollapsed">
      这里是可折叠内容区域
    </div>
  </div>
</template>

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

添加过渡动画效果

使用Vue内置的<transition>组件实现平滑过渡：

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">切换</button>
    <transition name="fade">
      <div v-show="!isCollapsed" class="content">
        过渡动画内容区域
      </div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s, max-height 0.5s;
  max-height: 500px;
  overflow: hidden;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  max-height: 0;
}
</style>

封装可复用组件

将折叠功能封装为可复用组件：

<!-- Collapse.vue -->
<template>
  <div class="collapse-container">
    <div class="collapse-header" @click="toggle">
      <slot name="header">{{ title }}</slot>
    </div>
    <transition name="slide">
      <div class="collapse-body" v-show="isOpen">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    open: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isOpen: this.open
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

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

使用第三方库实现高级功能

对于更复杂的需求，可以考虑使用第三方组件库：

Element UI的el-collapse组件
Ant Design Vue的a-collapse组件
Bootstrap Vue的b-collapse组件

以Element UI为例：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="标题1" name="1">
      内容区域1
    </el-collapse-item>
    <el-collapse-item title="标题2" name="2">
      内容区域2
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1']
    }
  }
}
</script>