vue实现折叠

实现折叠效果的基本方法

在Vue中实现折叠效果可以通过多种方式完成，常见的有使用v-show/v-if指令、CSS过渡动画或第三方组件库。以下是几种典型实现方案：

使用v-show控制显隐

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

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

添加CSS过渡效果

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

<transition name="fade">
  <div v-show="!isCollapsed">带动画的折叠内容</div>
</transition>

使用第三方组件库

对于更复杂的折叠需求，可以考虑使用现成的UI库：

Element UI的Collapse组件

<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>

Ant Design Vue的Collapse

<a-collapse v-model:activeKey="activeKey">
  <a-collapse-panel key="1" header="面板标题">
    内容区域
  </a-collapse-panel>
</a-collapse>

手写可复用折叠组件

如需自定义折叠组件，可创建如下结构：

<!-- 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-content" v-show="isOpen">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: ['title'],
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

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

性能优化建议

对于包含大量内容的折叠区域，建议结合<keep-alive>使用：

<keep-alive>
  <my-collapse v-if="showContent">
    <!-- 大量内容 -->
  </my-collapse>
</keep-alive>

动态计算内容高度可实现更平滑动画：

beforeEnter(el) {
  el.style.maxHeight = '0'
},
enter(el) {
  el.style.maxHeight = el.scrollHeight + 'px'
}