当前位置：首页 > VUE

vue实现折叠

2026-03-27 23:13:09VUE

Vue 实现折叠功能的方法

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

通过 Vue 的指令 v-if 或 v-show 可以动态控制元素的显示与隐藏。v-if 会完全移除 DOM 节点，而 v-show 仅切换 CSS 的 display 属性。

<template>
  <div>
    <button @click="toggle">Toggle Content</button>
    <div v-show="isVisible">This content can be folded.</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">Content with fade animation.</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;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用第三方库（如 `vue-collapse`）

如果需要更复杂的折叠功能，可以使用第三方库如 vue-collapse 或 Element UI 的折叠面板组件。

安装 vue-collapse：

npm install vue-collapse

使用示例：

<template>
  <div>
    <button @click="toggle">Toggle Collapse</button>
    <vue-collapse :show="isVisible">
      <div>Content inside vue-collapse component.</div>
    </vue-collapse>
  </div>
</template>

<script>
import { VueCollapse } from 'vue-collapse';

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

动态高度过渡

如果需要折叠内容高度动态变化，可以使用 max-height 过渡。

<template>
  <div>
    <button @click="toggle">Toggle Height</button>
    <div class="collapsible" :style="{ maxHeight: isVisible ? '500px' : '0' }">
      <p>Dynamic height content.</p>
    </div>
  </div>
</template>

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

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

使用 `Element UI` 的折叠面板

如果项目中使用 Element UI，可以直接使用其提供的 el-collapse 组件。

vue实现折叠

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

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

以上方法涵盖了从简单到复杂的折叠功能实现，根据项目需求选择合适的方式即可。

标签: vue