当前位置：首页 > VUE

vue 实现口风琴

2026-03-08 14:34:17VUE

实现口风琴效果的方法

在Vue中实现口风琴（Accordion）效果，可以通过组件化方式结合动态样式和事件处理来完成。以下是几种常见的实现方式：

使用v-for和v-show/v-if

通过循环渲染多个折叠面板，利用v-show或v-if控制内容展开与折叠：

<template>
  <div class="accordion">
    <div 
      v-for="(item, index) in items" 
      :key="index" 
      class="accordion-item"
    >
      <div 
        class="accordion-header" 
        @click="toggle(index)"
      >
        {{ item.title }}
      </div>
      <div 
        class="accordion-content" 
        v-show="activeIndex === index"
      >
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: null,
      items: [
        { title: '标题1', content: '内容1' },
        { title: '标题2', content: '内容2' }
      ]
    }
  },
  methods: {
    toggle(index) {
      this.activeIndex = this.activeIndex === index ? null : index
    }
  }
}
</script>

<style>
.accordion-item {
  margin-bottom: 8px;
}
.accordion-header {
  padding: 12px;
  background: #f0f0f0;
  cursor: pointer;
}
.accordion-content {
  padding: 12px;
  border: 1px solid #ddd;
}
</style>

使用组件递归实现嵌套口风琴

对于需要嵌套结构的情况，可以创建递归组件：

<template>
  <accordion-item 
    v-for="item in items" 
    :item="item" 
    :key="item.id"
  />
</template>

<script>
import AccordionItem from './AccordionItem.vue'

export default {
  components: { AccordionItem },
  data() {
    return {
      items: [
        { 
          id: 1, 
          title: '父级1',
          children: [
            { id: 11, title: '子级1', content: '内容1' }
          ]
        }
      ]
    }
  }
}
</script>

使用第三方库

现成的Vue组件库如Element UI、Vuetify等已提供口风琴组件：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item 
      v-for="item in items" 
      :title="item.title" 
      :name="item.id"
    >
      {{ item.content }}
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [],
      items: [
        { id: 1, title: '标题1', content: '内容1' }
      ]
    }
  }
}
</script>

添加过渡动画

通过Vue的<transition>组件实现平滑的展开/折叠动画：

<transition name="slide">
  <div 
    class="accordion-content" 
    v-show="activeIndex === index"
  >
    {{ item.content }}
  </div>
</transition>

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

可访问性优化

遵循WAI-ARIA标准增强可访问性：

vue 实现口风琴

<div 
  role="button" 
  :aria-expanded="activeIndex === index" 
  tabindex="0"
  @keydown.enter="toggle(index)"
>
  标题
</div>
<div 
  role="region" 
  :aria-hidden="activeIndex !== index"
>
  内容
</div>

以上方法可根据实际需求组合使用，构建功能完善的口风琴组件。