当前位置：首页 > 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 定义过渡动画的进入和离开过程。

<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 为例：

<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>

调用时：

vue实现收起展开面板

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

注意事项

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

标签: 面板 vue

分享给朋友：

vue实现多选联动

vue实现多选联动的方法使用v-model绑定数组在Vue中，可以通过v-model绑定一个数组来实现多选联动。当复选框被选中或取消选中时，数组会自动更新。 <template>…

vue实现ai

Vue 实现 AI 功能 Vue.js 可以通过集成第三方 AI 服务或本地 AI 模型来实现 AI 功能。以下是几种常见的方法：集成第三方 AI API 使用 Vue 调用如 OpenAI、Go…

vue实现过程

Vue 的实现过程 Vue 的实现过程可以分为多个核心模块，包括响应式系统、虚拟 DOM、模板编译等。以下是 Vue 的主要实现过程分析。响应式系统 Vue 的响应式系统基于 Object.def…

vue筛选实现

Vue 筛选实现方法使用计算属性实现筛选计算属性是 Vue 中实现数据筛选的常用方式。通过定义一个计算属性，可以根据输入的条件动态过滤数据。 <template> <div…

vue实现接口

在 Vue 中实现接口请求 Vue 本身不直接提供 HTTP 请求功能，通常需要借助第三方库如 axios 或 fetch 来实现接口请求。以下是几种常见方法：使用 axios 发送请求安装 a…

利用vue 实现

以下是利用 Vue 实现常见功能的几种方法，分为不同场景和技术要点：数据绑定与响应式更新 Vue 的核心特性是数据绑定，通过 v-model 实现双向绑定： <template>…

vue实现收起展开面板