Vue.js：无需BootstrapVue实现单个div折叠的方法

当然可以！完全不需要依赖BootstrapVue这类第三方插件，用纯Vue.js结合少量CSS就能轻松实现单个div的折叠效果，还能自定义平滑过渡动画。下面是具体的实现思路和代码示例：

核心实现思路 #

• 利用Vue的响应式数据控制折叠状态：定义一个布尔值变量，通过点击按钮切换它的值来控制div的显示/隐藏
• 用CSS过渡动画实现平滑折叠效果（如果不需要动画，直接用Vue的v-show/v-if即可）

完整代码示例 #

基础版（带平滑过渡动画） #

<template>
  <div>
    <!-- 折叠触发按钮 -->
    <button @click="toggleCollapse" class="toggle-btn">
      {{ isCollapsed ? '展开内容' : '折叠内容' }}
    </button>

    <!-- 可折叠的div容器 -->
    <div class="collapse-wrapper" :class="{ collapsed: isCollapsed }">
      <div class="collapse-content">
        这里是折叠的内容区域！你可以自由添加文本、图片、表单甚至嵌套更多组件，完全不受限制。
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制折叠状态：false=展开，true=折叠
      isCollapsed: false
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    }
  }
};
</script>

<style scoped>
.toggle-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.collapse-wrapper {
  /* 设置足够大的max-height来容纳内容，确保过渡生效 */
  max-height: 600px;
  /* 定义过渡动画的时长和曲线 */
  transition: max-height 0.3s ease-in-out;
  overflow: hidden;
  margin-top: 12px;
}

/* 折叠状态下将max-height设为0，隐藏内容 */
.collapse-wrapper.collapsed {
  max-height: 0;
}

.collapse-content {
  padding: 16px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}
</style>

极简版（无动画，瞬间切换） #

如果不需要平滑过渡，直接用Vue的v-show指令即可，代码更简洁：

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>
    <div v-show="!isCollapsed" style="margin-top:12px; padding:16px; background:#f8f9fa;">
      极简版折叠内容
    </div>
  </div>
</template>

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

实现说明 #

1. 响应式状态控制：通过isCollapsed这个布尔值变量，我们可以精准控制折叠区域的显示状态，点击按钮时切换变量值即可
2. CSS过渡原理：因为CSS无法直接对height: auto做过渡动画，所以我们用max-height来模拟——展开时设置一个足够大的max-height（确保能容纳所有内容），折叠时将max-height设为0，配合overflow: hidden实现平滑的展开/收起效果
3. 自定义扩展：你可以根据需求修改按钮样式、过渡时长、内容区域的样式，甚至添加嵌套折叠（只需要给每个嵌套区域单独定义一个状态变量即可）

内容的提问来源于stack exchange，提问作者josefdev