vue实现折叠效果

实现折叠效果的基本方法

在Vue中实现折叠效果可以通过条件渲染（v-if或v-show）结合CSS过渡或动画完成。以下是一个基础实现示例：

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>

    <transition name="fade">
      <div v-show="!isCollapsed" class="content">
        这里是需要折叠显示的内容
      </div>
    </transition>
  </div>
</template>

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

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

.fade-enter, .fade-leave-to {
  opacity: 0;
  max-height: 0;
}

.content {
  padding: 10px;
  border: 1px solid #ddd;
}
</style>

使用第三方组件库

主流UI库如Element UI、Ant Design Vue等提供了现成的折叠组件：

Element UI示例：

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

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

Ant Design Vue示例：

<a-collapse v-model="activeKey">
  <a-collapse-panel key="1" header="标题1">
    内容1
  </a-collapse-panel>
</a-collapse>

<script>
export default {
  data() {
    return {
      activeKey: []
    }
  }
}
</script>

高级自定义实现

对于更复杂的需求，可以结合CSS Grid或Flexbox实现平滑动画：

<template>
  <div class="collapse-container">
    <div class="header" @click="toggle">
      点击折叠/展开
    </div>
    <div 
      class="content" 
      :style="{ 'max-height': isOpen ? contentHeight + 'px' : '0' }"
      ref="content"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      contentHeight: 0
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
      if (this.isOpen) {
        this.$nextTick(() => {
          this.contentHeight = this.$refs.content.scrollHeight
        })
      }
    }
  }
}
</script>

<style>
.collapse-container {
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.header {
  padding: 10px;
  background: #f5f5f5;
  cursor: pointer;
}

.content {
  transition: max-height 0.3s ease-out;
  overflow: hidden;
}
</style>

性能优化建议

动态内容高度计算可能影响性能，对于大数据量内容建议：

• 使用requestAnimationFrame优化动画
• 考虑虚拟滚动技术
• 避免在折叠面板中使用复杂计算属性

methods: {
  measureHeight() {
    requestAnimationFrame(() => {
      this.contentHeight = this.$refs.content.scrollHeight
    })
  }
}

以上方法可根据实际需求选择使用，简单交互推荐使用UI库组件，复杂自定义需求可采用基础实现方案。