当前位置：首页 > VUE

vue实现折叠功能

2026-01-18 14:35:25VUE

Vue 实现折叠功能的方法

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

通过 Vue 的指令 v-show 或 v-if 可以简单实现元素的显示与隐藏。v-show 通过 CSS 的 display 属性切换，v-if 会动态添加或移除 DOM 元素。

<template>
  <div>
    <button @click="toggle">Toggle Content</button>
    <div v-show="isVisible">折叠内容区域</div>
  </div>
</template>

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

结合 CSS 过渡动画

通过 Vue 的 <transition> 组件和 CSS 过渡效果，可以实现平滑的折叠动画。

<template>
  <div>
    <button @click="toggle">Toggle with Animation</button>
    <transition name="fade">
      <div v-show="isVisible">带过渡动画的折叠内容</div>
    </transition>
  </div>
</template>

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

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

使用第三方组件库

许多 Vue UI 库（如 Element UI、Ant Design Vue）提供了现成的折叠面板组件，可以直接使用。

以 Element UI 为例：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="折叠面板 1" name="1">
      <div>内容区域 1</div>
    </el-collapse-item>
    <el-collapse-item title="折叠面板 2" name="2">
      <div>内容区域 2</div>
    </el-collapse-item>
  </el-collapse>
</template>

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

动态高度过渡

对于高度不确定的内容，可以通过 JavaScript 计算内容高度，实现更自然的折叠效果。

<template>
  <div>
    <button @click="toggle">Toggle Dynamic Height</button>
    <div
      class="content"
      :style="{ height: isVisible ? contentHeight + 'px' : '0' }"
      ref="content"
    >
      <p>动态高度的折叠内容</p>
      <p>可能包含多行文本或其他元素</p>
    </div>
  </div>
</template>

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

<style>
.content {
  overflow: hidden;
  transition: height 0.3s ease;
}
</style>

手风琴效果（Accordion）

实现多个折叠面板中每次只展开一个的效果。

vue实现折叠功能

<template>
  <div>
    <div
      v-for="(item, index) in items"
      :key="index"
      class="accordion-item"
    >
      <div class="accordion-header" @click="toggle(index)">
        {{ item.title }}
      </div>
      <div class="accordion-content" v-show="activeIndex === index">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: null,
      items: [
        { title: '标题 1', content: '内容 1' },
        { title: '标题 2', content: '内容 2' },
        { title: '标题 3', content: '内容 3' }
      ]
    };
  },
  methods: {
    toggle(index) {
      this.activeIndex = this.activeIndex === index ? null : index;
    }
  }
};
</script>

<style>
.accordion-header {
  cursor: pointer;
  padding: 10px;
  background: #f5f5f5;
}
.accordion-content {
  padding: 10px;
  border: 1px solid #ddd;
}
</style>

这些方法覆盖了从基础到进阶的 Vue 折叠功能实现，可以根据具体需求选择适合的方案。对于复杂项目，推荐使用成熟的 UI 库提供的组件；对于定制化需求，可以基于过渡动画或动态高度方法自行实现。