当前位置：首页 > VUE

vue实现折叠组件

2026-02-11 00:50:33VUE

Vue 实现折叠组件的方法

使用 v-show 或 v-if 控制显示隐藏

通过 Vue 的指令 v-show 或 v-if 可以简单实现折叠效果。v-show 通过 CSS 的 display 属性控制元素显示隐藏，适合频繁切换的场景；v-if 会直接销毁或重建 DOM 元素，适合不频繁切换的场景。

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">Toggle</button>
    <div v-show="!isCollapsed">折叠内容</div>
  </div>
</template>

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

结合 CSS 过渡动画

通过 Vue 的 <transition> 组件和 CSS 过渡效果，可以让折叠更加平滑。

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">Toggle</button>
    <transition name="slide">
      <div v-show="!isCollapsed" class="content">折叠内容</div>
    </transition>
  </div>
</template>

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

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

封装为可复用组件

将折叠逻辑封装为可复用的组件，便于在项目中多次使用。

<template>
  <div class="collapse">
    <div class="collapse-header" @click="toggle">
      <slot name="header">{{ title }}</slot>
    </div>
    <transition name="slide">
      <div class="collapse-content" v-show="!isCollapsed">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '标题'
    }
  },
  data() {
    return {
      isCollapsed: true
    }
  },
  methods: {
    toggle() {
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

<style>
.collapse-header {
  cursor: pointer;
  padding: 10px;
  background: #f5f5f5;
}
.collapse-content {
  padding: 10px;
  border: 1px solid #eee;
}
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.5s ease;
}
.slide-enter, .slide-leave-to {
  max-height: 0;
  overflow: hidden;
}
.slide-enter-to, .slide-leave {
  max-height: 1000px;
}
</style>

使用第三方库

如果需要更复杂的功能（如手风琴效果、动画控制等），可以使用第三方库如 vue-collapse 或 element-ui 的折叠面板组件。

安装 element-ui：

npm install element-ui

使用 el-collapse 组件：

vue实现折叠组件

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

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

通过以上方法，可以根据需求选择适合的方式实现折叠组件。