当前位置：首页 > VUE

vue实现折叠组件

2026-01-08 08:28:08VUE

Vue 折叠组件实现方法

基于 v-show 和事件触发

通过 v-show 控制内容的显示与隐藏，结合点击事件切换状态。

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

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

添加过渡动画效果

使用 Vue 内置的 <transition> 组件实现平滑的展开/折叠动画。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="fade">
      <div v-show="isOpen">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s, max-height 0.5s;
  max-height: 1000px;
  overflow: hidden;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  max-height: 0;
}
</style>

可复用组件封装

创建可配置的折叠面板组件，支持自定义标题和默认状态。

<template>
  <div class="collapse-panel">
    <div class="panel-header" @click="toggle">
      {{ title }}
      <span class="icon">{{ isOpen ? '-' : '+' }}</span>
    </div>
    <transition name="slide">
      <div class="panel-content" v-show="isOpen">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'Collapse Panel'
    },
    defaultOpen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isOpen: this.defaultOpen
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

<style>
.panel-header {
  cursor: pointer;
  padding: 10px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}
.panel-content {
  padding: 15px;
  border: 1px solid #ddd;
  border-top: none;
}
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.3s ease;
  max-height: 500px;
  overflow: hidden;
}
.slide-enter, .slide-leave-to {
  max-height: 0;
}
</style>

使用示例

<template>
  <div>
    <collapse-panel title="Section 1">
      Content for section 1
    </collapse-panel>
    <collapse-panel title="Section 2" :defaultOpen="true">
      Content for section 2
    </collapse-panel>
  </div>
</template>

<script>
import CollapsePanel from './CollapsePanel.vue'

export default {
  components: {
    CollapsePanel
  }
}
</script>

注意事项