vue实现折叠效果

使用 Vue 实现折叠效果的方法

动态绑定 class 和 v-show

通过 v-show 或 v-if 控制元素的显示与隐藏，结合 CSS 过渡动画实现折叠效果。
HTML 部分：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div v-show="isCollapsed" class="collapse-content">
      Content to be collapsed
    </div>
  </div>
</template>

JavaScript 部分：

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

CSS 部分：

.collapse-content {
  transition: all 0.3s ease;
}

使用 Vue Transition 组件

利用 Vue 内置的 <transition> 组件实现平滑的折叠动画效果。
HTML 部分：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="slide">
      <div v-show="isCollapsed" class="collapse-content">
        Content to be collapsed
      </div>
    </transition>
  </div>
</template>

CSS 部分：

.slide-enter-active, .slide-leave-active {
  transition: max-height 0.3s ease;
}
.slide-enter, .slide-leave-to {
  max-height: 0;
  overflow: hidden;
}
.slide-enter-to, .slide-leave {
  max-height: 1000px;
}

第三方库：vue-collapse

对于更复杂的折叠需求，可以使用 vue-collapse 等第三方库。
安装：

npm install vue-collapse --save

使用示例：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <vue-collapse :show="isCollapsed">
      <div class="collapse-content">
        Content to be collapsed
      </div>
    </vue-collapse>
  </div>
</template>
<script>
import { VueCollapse } from 'vue-collapse';
export default {
  components: { VueCollapse },
  data() {
    return { isCollapsed: false };
  },
  methods: {
    toggle() {
      this.isCollapsed = !this.isCollapsed;
    }
  }
};
</script>

动态高度过渡

通过动态计算内容高度实现平滑折叠动画。
HTML 部分：

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

JavaScript 部分：

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

CSS 部分：

.collapse-content {
  overflow: hidden;
  transition: height 0.3s ease;
}

以上方法可以根据实际需求选择，动态绑定 class 和 v-show 适合简单场景，而 Transition 组件和动态高度过渡能实现更流畅的动画效果。