Vue 手风琴组件三种实现方式的使用方法与封装技巧详解

原创

小焱

发布于 2025-06-04 08:25:54

3430

文章被收录于专栏：前端开发前端开发

下面为你详细介绍这三种实现方式的使用方法和组件封装方法：

一、原生Vue实现方式

使用方法

创建组件文件：将完整示例代码保存为Accordion.vue文件
在父组件中引入

<template>
  <div>
    <Accordion />
  </div>
</template>

<script>
import Accordion from './components/Accordion.vue'

export default {
  components: {
    Accordion
  }
}
</script>

自定义内容：修改items数组中的数据即可展示不同内容

组件封装方法

提取可配置参数

<template>
  <div class="accordion">
    <div class="accordion-item" v-for="(item, index) in items" :key="item.id || index">
      <div class="accordion-header" @click="toggleAccordion(index)">
        {{ item.title }}
        <i :class="isActive(index) ? 'fa fa-chevron-down' : 'fa fa-chevron-right'" />
      </div>
      <div class="accordion-content" :style="{ maxHeight: isActive(index) ? contentHeight + 'px' : '0' }">
        <slot :item="item" :index="index">{{ item.content }}</slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomAccordion',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    multiple: {
      type: Boolean,
      default: false
    },
    contentHeight: {
      type: Number,
      default: 300
    }
  },
  data() {
    return {
      activeIndexes: []
    }
  },
  methods: {
    toggleAccordion(index) {
      if (this.multiple) {
        const isActive = this.activeIndexes.includes(index)
        this.activeIndexes = isActive
          ? this.activeIndexes.filter(i => i !== index)
          : [...this.activeIndexes, index]
      } else {
        this.activeIndexes = this.activeIndexes[0] === index ? [] : [index]
      }
    },
    isActive(index) {
      return this.activeIndexes.includes(index)
    }
  }
}
</script>

二、Element-UI组件使用方法

使用方法

全局引入Element-UI（参考上文安装步骤）
在模板中直接使用

<template>
  <el-collapse v-model="activeNames" accordion>
    <el-collapse-item name="1">
      <template #title>
        <span>标题1</span>
        <i class="el-icon-info"></i>
      </template>
      <div>内容1</div>
    </el-collapse-item>
    <el-collapse-item name="2">
      <template #title>标题2</template>
      <div>内容2</div>
    </el-collapse-item>
  </el-collapse>
</template>

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

组件封装方法

创建封装组件**ElementAccordion.vue**

<template>
  <el-collapse :accordion="!multiple" v-model="activeNames">
    <el-collapse-item 
      v-for="item in items" 
      :key="item.name" 
      :name="item.name"
    >
      <template #title>
        {{ item.title }}
        <span v-if="item.badge" class="el-badge__content is-fixed is-dot"></span>
      </template>
      <div>{{ item.content }}</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    multiple: {
      type: Boolean,
      default: false
    },
    activeNames: {
      type: Array,
      default: () => []
    }
  }
}
</script>

三、自定义指令实现方式

使用方法

注册全局指令（在main.js中）

import Vue from 'vue'

Vue.directive('accordion', {
  inserted(el, binding) {
    // 指令逻辑...
  }
})

在模板中使用

<template>
  <div v-accordion class="custom-accordion">
    <div class="accordion-item" v-for="item in faqList" :key="item.id">
      <div class="accordion-header">{{ item.question }}</div>
      <div class="accordion-content">{{ item.answer }}</div>
    </div>
  </div>
</template>

组件封装方法

创建指令组件**DirectiveAccordion.vue**

<template>
  <div v-accordion class="directive-accordion">
    <div class="accordion-item" v-for="item in items" :key="item.id">
      <div class="accordion-header">
        {{ item.title }}
        <i class="fa fa-plus-circle" />
      </div>
      <div class="accordion-content">
        <slot :item="item">{{ item.content }}</slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
.directive-accordion {
  border-radius: 4px;
  overflow: hidden;
}

.accordion-header {
  padding: 12px 16px;
  background-color: #f5f7fa;
  cursor: pointer;
  transition: background-color 0.2s;
}

.accordion-header:hover {
  background-color: #e4e7ed;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #fff;
  padding: 0 16px;
  border-top: 1px solid #ebeef5;
}
</style>