当前位置：首页 > VUE

vue实现折叠面板

2026-01-22 22:08:55VUE

实现折叠面板的基本思路

使用Vue实现折叠面板的核心是通过数据驱动视图变化，结合CSS过渡效果或动画实现展开/折叠的平滑效果。主要依赖v-show或v-if控制内容显示，通过点击事件切换状态。

基础实现代码示例

<template>
  <div class="collapse-panel">
    <div class="header" @click="isOpen = !isOpen">
      {{ title }}
      <span class="arrow">{{ isOpen ? '↑' : '↓' }}</span>
    </div>
    <div class="content" v-show="isOpen">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  },
  data() {
    return {
      isOpen: false
    }
  }
}
</script>

<style>
.collapse-panel {
  border: 1px solid #ddd;
  margin-bottom: 10px;
}
.header {
  padding: 10px;
  background: #f5f5f5;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.content {
  padding: 10px;
  transition: all 0.3s ease;
}
</style>

添加动画效果

为提升用户体验，可以添加CSS过渡动画：

.content {
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 0;
}
.content.active {
  max-height: 1000px; /* 根据实际内容调整 */
}

需要修改模板中的v-show为动态类名绑定：

vue实现折叠面板

<div class="content" :class="{ active: isOpen }">
  <slot></slot>
</div>

多面板互斥展开

实现多个折叠面板中同时只展开一个的需求：

export default {
  props: {
    title: String,
    name: String
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.$parent.$emit('toggle', this.name)
    }
  },
  created() {
    this.$parent.$on('toggle', name => {
      this.isOpen = name === this.name
    })
  }
}

父组件中需要包裹所有面板：

vue实现折叠面板

<template>
  <div>
    <collapse-panel v-for="item in items" :key="item.name" :title="item.title" :name="item.name"></collapse-panel>
  </div>
</template>