vue如何实现折叠效果

使用 CSS Transition 实现折叠效果

在 Vue 中可以通过动态绑定 class 或 style 结合 CSS transition 实现折叠效果。定义一个折叠容器，通过 v-if 或 v-show 控制显示隐藏，并添加过渡效果。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="collapse">
      <div v-show="isCollapsed" class="content">
        Content to be collapsed
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    }
  },
  methods: {
    toggle() {
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

<style>
.collapse-enter-active, .collapse-leave-active {
  transition: max-height 0.3s ease;
  overflow: hidden;
}

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

.content {
  max-height: 1000px; /* 设置足够大的值 */
}
</style>

使用 Vue Transition 组件

Vue 内置的 Transition 组件可以方便地实现各种过渡效果。通过定义 enter/leave 的 CSS 类名来控制折叠动画。

<template>
  <div>
    <button @click="isOpen = !isOpen">Toggle</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <div v-show="isOpen" class="item">Content</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.height = '0'
    },
    enter(el) {
      el.style.height = `${el.scrollHeight}px`
    },
    leave(el) {
      el.style.height = '0'
    }
  }
}
</script>

<style>
.item {
  overflow: hidden;
  transition: height 0.3s ease;
}
</style>

使用第三方库 vue-collapse

对于更复杂的折叠需求，可以使用专门为 Vue 设计的折叠组件库，如 vue-collapse。

安装：

npm install vue-collapse

使用示例：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <vue-collapse v-model="isOpen">
      <div class="content">
        Collapsible content
      </div>
    </vue-collapse>
  </div>
</template>

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

export default {
  components: {
    VueCollapse
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

手风琴效果实现

多个折叠面板中同时只能展开一个，实现手风琴效果。

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

<script>
export default {
  data() {
    return {
      activeIndex: null,
      items: [
        { title: 'Panel 1', content: 'Content 1' },
        { title: 'Panel 2', content: 'Content 2' },
        { title: 'Panel 3', content: 'Content 3' }
      ]
    }
  },
  methods: {
    toggle(index) {
      this.activeIndex = this.activeIndex === index ? null : index
    }
  }
}
</script>

<style>
.panel {
  transition: all 0.3s ease;
  overflow: hidden;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s, max-height 0.3s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
  max-height: 0;
}
</style>