vue 实现折叠面板

Vue 实现折叠面板的方法

使用 Vue 实现折叠面板可以通过多种方式完成，以下是几种常见的方法：

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

通过 Vue 的指令 v-show 或 v-if 可以轻松实现折叠面板的展开和收起功能。v-show 通过 CSS 的 display 属性控制显示隐藏，而 v-if 会直接销毁或重新创建 DOM 元素。

<template>
  <div>
    <button @click="toggle">Toggle Panel</button>
    <div v-show="isOpen">
      This is the content of the collapsible panel.
    </div>
  </div>
</template>

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

使用动态 CSS 过渡效果

通过 Vue 的 <transition> 组件可以为折叠面板添加平滑的动画效果。以下是一个带有过渡效果的折叠面板实现：

<template>
  <div>
    <button @click="toggle">Toggle Panel</button>
    <transition name="slide">
      <div v-show="isOpen" class="panel-content">
        This is the content of the collapsible panel.
      </div>
    </transition>
  </div>
</template>

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

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

使用第三方组件库

许多 Vue 第三方组件库（如 Element UI、Ant Design Vue 等）提供了现成的折叠面板组件，可以直接使用。

以 Element UI 为例：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="Panel 1" name="1">
      Content for panel 1
    </el-collapse-item>
    <el-collapse-item title="Panel 2" name="2">
      Content for panel 2
    </el-collapse-item>
  </el-collapse>
</template>

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

使用自定义组件封装

如果需要更灵活的折叠面板，可以封装一个自定义组件：

<template>
  <div class="collapsible-panel">
    <div class="panel-header" @click="toggle">
      {{ title }}
      <span class="arrow" :class="{ 'arrow-down': isOpen }"></span>
    </div>
    <div class="panel-content" v-show="isOpen">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

<style>
.collapsible-panel {
  border: 1px solid #ddd;
  margin-bottom: 10px;
}
.panel-header {
  padding: 10px;
  background: #f5f5f5;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.panel-content {
  padding: 10px;
}
.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
}
.arrow-down {
  transform: rotate(180deg);
}
</style>

使用时：

<collapsible-panel title="Custom Panel">
  This is the content of the custom collapsible panel.
</collapsible-panel>

以上方法可以根据需求选择适合的实现方式。