vue实现收缩展开

实现收缩展开的基本思路

在Vue中实现收缩展开功能，可以通过控制CSS类或内联样式来实现元素的显示与隐藏。常用的方法包括使用v-show、v-if指令，或者通过动态绑定CSS类来实现动画效果。

使用v-show实现简单切换

v-show通过切换元素的display属性来控制显示与隐藏，适合频繁切换的场景。

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">Toggle</button>
    <div v-show="!isCollapsed">Content to collapse/expand</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    }
  }
}
</script>

使用v-if实现条件渲染

v-if会完全销毁或重新创建DOM元素，适合不频繁切换且需要条件渲染的场景。

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">Toggle</button>
    <div v-if="!isCollapsed">Content to collapse/expand</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    }
  }
}
</script>

添加过渡动画效果

通过Vue的<transition>组件可以为收缩展开添加平滑的动画效果。

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">Toggle</button>
    <transition name="fade">
      <div v-show="!isCollapsed">Content with animation</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

动态绑定高度实现平滑展开

通过动态绑定元素的高度，可以实现更平滑的展开效果。

<template>
  <div>
    <button @click="toggleCollapse">Toggle</button>
    <div 
      ref="content"
      :style="{ height: isCollapsed ? '0px' : contentHeight + 'px' }"
      class="collapsible-content"
    >
      Content with height transition
    </div>
  </div>
</template>

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

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

使用第三方库实现高级效果

对于更复杂的收缩展开需求，可以使用第三方动画库如vue-animate-onscroll或animate.css。

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">Toggle</button>
    <div 
      v-show="!isCollapsed"
      class="animate__animated animate__fadeIn"
    >
      Content with Animate.css
    </div>
  </div>
</template>

<script>
import 'animate.css';
export default {
  data() {
    return {
      isCollapsed: false
    }
  }
}
</script>

注意事项

动态内容高度变化时，需要重新计算高度值。可以在updated钩子中更新contentHeight。

updated() {
  if (!this.isCollapsed) {
    this.contentHeight = this.$refs.content.scrollHeight;
  }
}

对于嵌套的收缩展开组件，建议使用事件总线或Vuex管理状态，避免直接修改父组件状态。