当前位置：首页 > VUE

vue 折叠展开的实现

2026-02-21 17:09:19VUE

Vue 折叠展开的实现方法

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

通过 v-show 或 v-if 绑定布尔值动态控制元素的显示与隐藏。v-show 通过 CSS 的 display 属性切换，适合频繁切换的场景；v-if 会销毁和重建 DOM 节点，适合条件较少变化的场景。

<template>
  <div>
    <button @click="isExpanded = !isExpanded">切换</button>
    <div v-show="isExpanded">可折叠内容</div>
  </div>
</template>

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

结合 CSS 过渡动画

通过 Vue 的 <transition> 组件实现平滑的展开/折叠动画。需定义 CSS 过渡类名（如 v-enter、v-leave-to）来控制动画效果。

<template>
  <div>
    <button @click="isExpanded = !isExpanded">切换</button>
    <transition name="fade">
      <div v-if="isExpanded" class="content">带动画的内容</div>
    </transition>
  </div>
</template>

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

使用第三方组件库

若项目中使用 UI 库（如 Element UI、Ant Design Vue），可直接调用其提供的折叠面板组件（如 el-collapse 或 a-collapse），快速实现标准化交互。

<template>
  <el-collapse v-model="activePanels">
    <el-collapse-item title="标题" name="1">
      折叠内容
    </el-collapse-item>
  </el-collapse>
</template>

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

动态高度过渡

通过监听内容高度变化，使用 JavaScript 动态计算并设置 max-height，实现高度不固定时的平滑过渡效果。

<template>
  <div>
    <button @click="toggle">切换</button>
    <div class="container" :style="{ maxHeight: isExpanded ? contentHeight + 'px' : '0' }">
      <div ref="content">动态高度内容</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      contentHeight: 0
    }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded;
      if (this.isExpanded) {
        this.contentHeight = this.$refs.content.scrollHeight;
      }
    }
  }
}
</script>

<style>
.container {
  transition: max-height 0.3s;
  overflow: hidden;
}
</style>