当前位置：首页 > VUE

vue 实现折叠

2026-03-27 21:03:46VUE

Vue 实现折叠功能

折叠功能可以通过 Vue 的动态组件、条件渲染或第三方库实现。以下是几种常见方法：

使用 v-if 或 v-show 实现基础折叠

通过点击事件切换布尔值，控制内容的显示与隐藏：

<template>
  <div>
    <button @click="toggle">Toggle Collapse</button>
    <div v-if="isCollapsed">
      Content to be collapsed
    </div>
  </div>
</template>

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

添加过渡动画效果

Vue 的 <transition> 组件可以为折叠添加平滑动画：

<template>
  <div>
    <button @click="toggle">Toggle with Animation</button>
    <transition name="fade">
      <div v-if="isCollapsed" class="content">
        Animated content
      </div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.content {
  background: #f0f0f0;
  padding: 10px;
}
</style>

使用第三方库（如 Element UI）

Element UI 提供现成的 Collapse 组件：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="Title 1" name="1">
      Content for item 1
    </el-collapse-item>
    <el-collapse-item title="Title 2" name="2">
      Content for item 2
    </el-collapse-item>
  </el-collapse>
</template>

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

实现手风琴效果（Accordion）

多个折叠面板中只展开一个：

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

<script>
export default {
  data() {
    return {
      activeIndex: null,
      items: [
        { title: 'Item 1', content: 'Content 1' },
        { title: 'Item 2', content: 'Content 2' }
      ]
    }
  },
  methods: {
    toggle(index) {
      this.activeIndex = this.activeIndex === index ? null : index
    }
  }
}
</script>

使用 CSS 控制高度动画

通过动态绑定样式实现高度变化：

vue 实现折叠

<template>
  <div>
    <button @click="toggle">Toggle Height</button>
    <div 
      class="collapsible" 
      :style="{ height: isCollapsed ? 'auto' : '0' }"
    >
      Content with height transition
    </div>
  </div>
</template>

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

每种方法适用于不同场景，基础项目可使用原生 Vue 实现，复杂需求可考虑第三方组件库。动画效果可通过 CSS transitions 或 Vue 的 transition 组件增强用户体验。

标签: vue