vue实现收缩展开

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-if="isVisible">This content can be toggled.</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-if="isVisible" class="content">Content with fade effect.</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>

动态高度过渡

如果需要实现高度从 0 到 auto 的过渡，可以使用 max-height 结合 CSS 过渡。

<template>
  <div>
    <button @click="toggle">Toggle Height</button>
    <div class="collapse-container">
      <div class="collapse-content" :style="{ maxHeight: isVisible ? '1000px' : '0' }">
        Content with height transition.
      </div>
    </div>
  </div>
</template>

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

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

使用第三方库

如果需要更复杂的功能，可以借助第三方库如 vue-collapse 或手动封装组件。

<template>
  <div>
    <button @click="toggle">Toggle with Library</button>
    <vue-collapse :show="isVisible">
      <div>Content collapsed by vue-collapse.</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>

封装可复用组件

将收缩展开功能封装为可复用的组件，便于在项目中多次使用。

<template>
  <div>
    <button @click="toggle">{{ buttonText }}</button>
    <div class="collapse-wrapper" :style="{ height: isOpen ? 'auto' : '0' }">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    buttonText: {
      type: String,
      default: 'Toggle'
    }
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

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

以上方法涵盖了从基础到进阶的实现方式，根据需求选择合适的方式即可。