当前位置：首页 > VUE

vue实现收起展开面板

2026-03-27 01:47:37VUE

Vue 实现收起展开面板

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

通过 v-show 或 v-if 指令动态控制面板内容的显示与隐藏。v-show 通过 CSS 的 display 属性切换，适合频繁切换的场景；v-if 会销毁和重建 DOM 节点，适合不频繁切换的场景。

<template>
  <div>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开' }}
    </button>
    <div v-show="isExpanded">
      面板内容
    </div>
  </div>
</template>

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

添加过渡动画

使用 Vue 的 <transition> 组件为收起展开添加平滑的过渡效果。通过 CSS 定义过渡动画的进入和离开过程。

vue实现收起展开面板

<template>
  <div>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开' }}
    </button>
    <transition name="fade">
      <div v-show="isExpanded" class="panel-content">
        面板内容
      </div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s, max-height 0.3s;
  overflow: hidden;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  max-height: 0;
}
.panel-content {
  max-height: 500px; /* 根据实际内容调整 */
}
</style>

使用第三方组件库

如果需要更复杂的功能（如手风琴效果），可以直接使用第三方 UI 库提供的组件，例如 Element UI 的 el-collapse 或 Ant Design Vue 的 a-collapse。

以 Element UI 为例：

vue实现收起展开面板

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

<script>
export default {
  data() {
    return {
      activePanel: ['1'] // 默认展开的面板
    }
  }
}
</script>

动态内容与插槽

通过插槽（slot）实现面板内容的动态渲染，增强组件的复用性。

<template>
  <div>
    <button @click="toggle">
      {{ isExpanded ? '收起' : '展开' }}
    </button>
    <transition name="slide">
      <div v-show="isExpanded">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

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

调用时：

<my-panel>
  <p>自定义面板内容</p>
</my-panel>

注意事项

如果面板内容高度不确定，建议使用 max-height 替代固定高度以实现平滑动画。
频繁切换时优先选择 v-show 以减少性能开销。
过渡动画的 CSS 属性需与面板布局匹配（如 opacity 或 transform）。

标签: 面板 vue

分享给朋友：

vue前端实现下载进度

实现下载进度条的基本思路在Vue中实现下载进度条，通常需要结合XMLHttpRequest或Fetch API来监听下载进度事件。通过计算已下载数据与总数据的比例，动态更新进度条的显示。使用XM…

vue实现主题

Vue 实现主题的方法使用 CSS 变量动态切换主题定义全局 CSS 变量，通过修改这些变量实现主题切换。在 Vue 的根组件或全局样式中定义变量： :root { --primary-co…

vue 实现视频

Vue 实现视频播放功能使用 Vue 实现视频播放功能可以通过 HTML5 的 <video> 标签或第三方库（如 video.js）来实现。以下是两种常见的方法：使用 HTML5…

实现vue datepicker

安装依赖使用 vue-datepicker 或第三方库如 v-calendar 或 vue2-datepicker。以 vue2-datepicker 为例： npm install vue2…

vue实现抽奖

Vue 实现抽奖功能基本抽奖逻辑创建一个Vue组件，包含奖品列表、抽奖按钮和结果显示区域。使用随机数生成器选择奖品。 <template> <div> <…

vue 实现modal

Vue 实现 Modal 的方法使用 Vue 原生组件通过 Vue 的组件系统可以轻松实现 Modal。创建一个可复用的 Modal 组件，通过 props 控制显示与隐藏。 <templ…

vue实现收起展开面板