vue js 实现折叠面板效果

Vue.js 可以通过组件化的方式轻松实现折叠面板（也叫折叠菜单或折叠卡片）的效果。以下是基本步骤：

1. **创建组件**：首先，你可以创建一个名为 `Collapse` 的自定义组件，它包含两个状态：`open`（是否展开）和显示内容的部分。

<template>
  <div class="collapse" v-bind:class="{ 'is-open': open }">
    <button @click="toggleOpen">{{ isOpen ? '收起' : '展开' }}</button>
    <slot v-if="open"></slot>
  </div>
</template>

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

<style scoped>
.collapse {
  display: flex;
}
.is-open {
  // 展开样式
}
</style>

2. **在父组件中使用**：在需要折叠面板的地方引入并使用这个组件，传入内容并通过 slot 渲染具体内容。

<template>
  <div>
    < Collapse v-model="activePanel">
      <p>这是第一级内容</p>
      <Collapse v-model="subPanels[0].active">
        <p>这是第二级内容</p>
      </Collapse>
    </Collapse>
  </div>
</template>

<script>
import Collapse from './Collapse.vue';

export default {
  components: {
    Collapse,
  },
  data() {
    return {
      activePanel: true,
      subPanels: [
        { active: false },
        // 添加更多嵌套折叠面板...
      ],
    };
  },
};
</script>

3. **样式调整**：为 `.is-open` 类添加样式，使其在展开状态下显示内容。

以上就是一个简单的 Vue.js 折叠面板的实现示例。如果你想实现更复杂的动画效果，可以考虑配合 Vue 动画库如 Vuetify 或 Element UI 使用。