当前位置：首页 > VUE

折叠面板vue实现

2026-02-20 17:34:45VUE

折叠面板的 Vue 实现方法

使用 Vue 原生实现

通过 Vue 的 v-if 或 v-show 指令结合点击事件切换面板的显示状态。

<template>
  <div>
    <button @click="toggle">Toggle Panel</button>
    <div v-show="isOpen">
      Panel Content
    </div>
  </div>
</template>

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

使用 Transition 添加动画效果

为折叠面板添加平滑的展开/折叠动画。

<template>
  <div>
    <button @click="toggle">Toggle Panel</button>
    <transition name="fade">
      <div v-show="isOpen" class="panel">
        Panel Content
      </div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.panel {
  height: 100px;
  background: #eee;
}
</style>

使用第三方组件库

主流 UI 库如 Element UI、Ant Design Vue 都提供了现成的折叠面板组件。

Element UI 示例：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="Panel 1" name="1">
      Content for panel 1
    </el-collapse-item>
    <el-collapse-item title="Panel 2" name="2">
      Content for panel 2
    </el-collapse-item>
  </el-collapse>
</template>

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

实现手风琴效果

多个折叠面板中同时只展开一个。

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

<script>
export default {
  data() {
    return {
      panels: [
        { title: 'Panel 1', content: 'Content 1', isOpen: false },
        { title: 'Panel 2', content: 'Content 2', isOpen: false }
      ]
    }
  },
  methods: {
    toggle(index) {
      this.panels.forEach((panel, i) => {
        panel.isOpen = i === index ? !panel.isOpen : false
      })
    }
  }
}
</script>

高度动画实现

使用 CSS 的 max-height 过渡实现高度变化的动画效果。

折叠面板vue实现

<template>
  <div>
    <button @click="toggle">Toggle Panel</button>
    <div class="panel" :style="{ maxHeight: isOpen ? '200px' : '0' }">
      Panel Content
    </div>
  </div>
</template>

<style>
.panel {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background: #f5f5f5;
}
</style>