vue实现折叠

Vue 实现折叠效果的方法

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

通过 Vue 的指令 v-show 或 v-if 可以简单实现折叠效果。v-show 通过 CSS 的 display 属性切换，v-if 会动态添加或移除 DOM 元素。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div v-show="isVisible">折叠内容</div>
  </div>
</template>

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

结合 CSS 过渡动画

使用 Vue 的 <transition> 组件可以为折叠添加平滑的动画效果。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="fade">
      <div v-show="isVisible">折叠内容</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>

使用第三方库（如 Element UI）

如果项目中使用了 Element UI，可以直接使用其提供的 el-collapse 组件实现折叠面板。

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="折叠面板 1" name="1">
      <div>折叠内容 1</div>
    </el-collapse-item>
    <el-collapse-item title="折叠面板 2" name="2">
      <div>折叠内容 2</div>
    </el-collapse-item>
  </el-collapse>
</template>

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

动态高度过渡

如果需要实现高度从 0 到 auto 的过渡效果，可以通过 CSS 和 JavaScript 结合实现。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div class="collapse" :style="{ height: isVisible ? 'auto' : '0' }">
      <div class="content">折叠内容</div>
    </div>
  </div>
</template>

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

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

使用 Vue 的 Transition 组件实现高度动画

通过 JavaScript 动态计算内容高度，实现更精确的高度过渡效果。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition @enter="enter" @leave="leave">
      <div v-show="isVisible" class="content">折叠内容</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible
    },
    enter(el, done) {
      el.style.height = 'auto'
      const height = el.clientHeight
      el.style.height = '0'
      setTimeout(() => {
        el.style.height = `${height}px`
        el.addEventListener('transitionend', done, { once: true })
      })
    },
    leave(el, done) {
      el.style.height = `${el.clientHeight}px`
      setTimeout(() => {
        el.style.height = '0'
        el.addEventListener('transitionend', done, { once: true })
      })
    }
  }
}
</script>

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

以上方法可以根据具体需求选择适合的实现方式。简单的显示隐藏可以使用 v-show 或 v-if，需要动画效果可以结合 <transition> 组件，复杂场景可以考虑使用第三方库或自定义高度过渡逻辑。