当前位置：首页 > VUE

vue实现折叠功能

2026-02-19 06:57:50VUE

实现折叠功能的方法

在Vue中实现折叠功能可以通过多种方式完成，以下是几种常见的方法：

使用v-if或v-show指令

通过控制变量的布尔值来切换元素的显示与隐藏：

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

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

使用CSS过渡效果

结合Vue的transition组件实现平滑的折叠动画效果：

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.5s ease;
  overflow: hidden;
}
.slide-enter, .slide-leave-to {
  max-height: 0;
}
.slide-enter-to, .slide-leave {
  max-height: 500px;
}
.content {
  background: #f5f5f5;
  padding: 10px;
}
</style>

使用第三方组件库

许多UI框架如Element UI、Ant Design 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>

动态高度过渡

实现更精确的高度动画控制：

vue实现折叠功能

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div 
      class="collapse-content" 
      :style="{ height: isCollapsed ? '0' : contentHeight + 'px' }"
      ref="content"
    >
      <div ref="inner">
        Content here
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: true,
      contentHeight: 0
    }
  },
  methods: {
    toggle() {
      if (this.isCollapsed) {
        this.contentHeight = this.$refs.inner.offsetHeight
      }
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

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