当前位置：首页 > VUE

vue 实现口风琴

2026-01-16 01:15:57VUE

Vue 实现手风琴效果

手风琴效果（Accordion）是一种常见的UI交互模式，允许用户展开或折叠内容区域。以下是几种实现方式：

使用v-for和v-show

<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' },
        { title: '标题3', content: '内容3' }
      ]
    }
  },
  methods: {
    toggle(index) {
      this.activeIndex = this.activeIndex === index ? null : index
    }
  }
}
</script>

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

使用动态组件

<template>
  <div>
    <button 
      v-for="(tab, index) in tabs" 
      :key="index"
      @click="currentTab = index"
    >
      {{ tab.title }}
    </button>
    <component :is="tabs[currentTab].content" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabs: [
        { title: 'Tab 1', content: 'TabContent1' },
        { title: 'Tab 2', content: 'TabContent2' }
      ]
    }
  },
  components: {
    TabContent1: { template: '<div>内容1</div>' },
    TabContent2: { template: '<div>内容2</div>' }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用现成的Vue组件库：

Element UI的ElCollapse组件
Vuetify的v-expansion-panels
Bootstrap Vue的b-collapse

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

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

动画效果增强

为手风琴添加平滑的展开/折叠动画：

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

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

多选模式实现

如果需要同时展开多个项目，可以修改toggle方法：

methods: {
  toggle(index) {
    if (this.activeIndexes.includes(index)) {
      this.activeIndexes = this.activeIndexes.filter(i => i !== index)
    } else {
      this.activeIndexes.push(index)
    }
  }
}

以上方法提供了从基础到进阶的手风琴实现方案，可根据具体需求选择合适的实现方式。

vue 实现口风琴