当前位置：首页 > VUE

vue实现收起展开面板

2026-02-09 16:59:17VUE

Vue 实现收起展开面板

使用 Vue 实现收起展开面板可以通过多种方式完成，以下是几种常见的方法：

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

通过 Vue 的指令 v-show 或 v-if 可以动态控制面板的显示和隐藏。v-show 通过 CSS 的 display 属性切换，而 v-if 会直接销毁和重建 DOM 节点。

<template>
  <div>
    <button @click="togglePanel">展开/收起</button>
    <div v-show="isPanelVisible">
      这里是面板内容
    </div>
  </div>
</template>

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

使用动态 CSS 类名实现动画效果

如果需要平滑的过渡效果，可以通过动态切换 CSS 类名并结合 CSS 过渡或动画实现。

<template>
  <div>
    <button @click="togglePanel">展开/收起</button>
    <div :class="{ 'panel-collapsed': !isPanelVisible }" class="panel">
      这里是面板内容
    </div>
  </div>
</template>

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

<style>
.panel {
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.panel-collapsed {
  max-height: 0;
}
</style>

使用 Vue Transition 组件

Vue 提供了 <transition> 组件，可以更方便地实现动画效果。

<template>
  <div>
    <button @click="togglePanel">展开/收起</button>
    <transition name="slide">
      <div v-show="isPanelVisible" class="panel">
        这里是面板内容
      </div>
    </transition>
  </div>
</template>

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

<style>
.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: 500px;
}
</style>

使用第三方库

如果需要更复杂的效果，可以使用第三方库如 vue-collapse 或 element-ui 的折叠面板组件。

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="面板标题" name="1">
      这里是面板内容
    </el-collapse-item>
  </el-collapse>
</template>

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

以上方法可以根据实际需求选择，简单的显示隐藏推荐使用 v-show 或 v-if，需要动画效果时可以使用动态类名或 <transition> 组件，复杂场景可以借助第三方库。

vue实现收起展开面板