Vue 自定义实现手风琴模式的折叠面板

王_lin

已于 2025-04-26 10:46:47 修改

阅读量200

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript 前端框架

于 2025-04-26 10:44:54 首次发布

本文链接：https://blog.youkuaiyun.com/csdn_bk/article/details/147527967

vue 专栏收录该内容

8 篇文章

订阅专栏

先看效果

在这里插入图片描述

组件代码



<template>
  <div class="accordion">
    <div
      v-for="(item, index) in items"  :key="index"  class="accordion-item"  
      :class="{ 'is-active': activeIndices.includes(index) }" 
     >
      <div class="accordion-header" @click="toggleItem(index)">
        {{ item.title }}
        <span class="accordion-icon">{{ activeIndices.includes(index) ? '−' : '+' }}</span>
      </div>
      <!-- 这里利用 Array.includes() 方法来判断是否需要展开 -->
      <div class="accordion-content" v-show="activeIndices.includes(index)">
        {{ item.content}}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  // 数据
  data: {
    required:true,
    type: Array,
    default: () => [ ]
  },
  // 是否需要单个展开
  accordion: {
    type: Boolean,
    default:false,
  }
})
// 设置为响应式
const items = ref(props.data)
// 定义一个是否展开数组
const activeIndices = ref([]);

// 将点击的下标传递
const toggleItem = (index) => {
  // 判断展开数组中是否有 当前展开下标 
  const position = activeIndices.value.indexOf(index);
  // 如果有
  if (position > -1) {
    // 使用 splice() 删除，v-show 将不展示
    activeIndices.value.splice(position, 1);
  } else {
  // 如果没有
  	// 判断父组件传递是否需要 单个展开
    if (props.accordion && activeIndices.value.length > 0) { 
      // 如果是，则清空当前数组
      activeIndices.value.splice(0)
    }
    // 将当前点击下标 push 进数组，形成展示
    activeIndices.value.push(index);
  }
};
</script>

// css 自己定义
<style scoped>
.accordion {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.accordion-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 8px;
  overflow: hidden;
}

.accordion-header {
  padding: 12px 16px;
  background-color: #f5f5f5;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

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

.accordion-icon {
  font-size: 18px;
}

.accordion-content {
  padding: 16px;
  background-color: white;
  border-top: 1px solid #eee;
}

.is-active .accordion-header {
  background-color: #979797;
}
</style>

使用组件


<accordion :data="data" :accordion="true"></accordion>

// 这个主要按照自己的层级导入
import accordion from './accordion.vue'

const data= [
  {title:"标题1",main:"内容1"},
  {title:"标题2",main:"内容2"},
  {title:"标题3",main:"内容3"},
  {title:"标题4",main:"内容4"},
]