当前位置：首页 > VUE

vue实现伸缩框

2026-02-20 13:43:55VUE

Vue 实现伸缩框的方法

伸缩框（Collapsible Panel）通常用于展开或折叠内容区域，以下提供几种常见的实现方式：

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

通过数据绑定和 Vue 指令实现基础的展开/折叠功能：

<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> 组件实现平滑的展开/折叠动画：

vue实现伸缩框

<template>
  <div>
    <button @click="toggle">切换</button>
    <transition name="slide">
      <div v-show="isExpanded" class="content">
        带动画的伸缩内容
      </div>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.5s ease;
  max-height: 500px;
}
.slide-enter, .slide-leave-to {
  max-height: 0;
  overflow: hidden;
}
</style>

封装为可复用组件

将伸缩框逻辑封装为独立组件：

<!-- CollapsePanel.vue -->
<template>
  <div class="collapse-panel">
    <div class="header" @click="toggle">
      <slot name="header">{{ title }}</slot>
      <span class="arrow">{{ isExpanded ? '↑' : '↓' }}</span>
    </div>
    <transition name="fade">
      <div class="body" v-show="isExpanded">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    defaultExpanded: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isExpanded: this.defaultExpanded
    }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

使用方式：

vue实现伸缩框

<collapse-panel title="高级选项">
  <p>这里是可折叠的内容</p>
</collapse-panel>

使用第三方库

如需更复杂的功能（如手风琴效果），可考虑以下库：

vue-collapse：轻量级折叠组件
element-ui 的 el-collapse 组件
bootstrap-vue 的 b-collapse 组件

安装示例（以 element-ui 为例）：

npm install element-ui

使用示例：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="标题1" name="1">
      内容1
    </el-collapse-item>
    <el-collapse-item title="标题2" name="2">
      内容2
    </el-collapse-item>
  </el-collapse>
</template>

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

以上方法可根据项目需求选择，从简单的手写实现到成熟的组件库方案均可满足不同场景。