vue实现折叠面板
实现折叠面板的基本思路
使用Vue实现折叠面板的核心是通过数据驱动视图变化，结合CSS过渡效果或动画实现展开/折叠的平滑效果。主要依赖v-show或v-if控制内容显示，通过点击事件切换状态。
基础实现代码示例
<template>
<div class="collapse-panel">
<div class="header" @click="isOpen = !isOpen">
{{ title }}
<span class="arrow">{{ isOpen ? '↑' : '↓' }}</span>
</div>
<div class="content" v-show="isOpen">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
title: String
},
data() {
return {
isOpen: false
}
}
}
</script>
<style>
.collapse-panel {
border: 1px solid #ddd;
margin-bottom: 10px;
}
.header {
padding: 10px;
background: #f5f5f5;
cursor: pointer;
display: flex;
justify-content: space-between;
}
.content {
padding: 10px;
transition: all 0.3s ease;
}
</style>添加动画效果
为提升用户体验，可以添加CSS过渡动画：
.content {
overflow: hidden;
transition: max-height 0.3s ease;
max-height: 0;
}
.content.active {
max-height: 1000px; /* 根据实际内容调整 */
}需要修改模板中的v-show为动态类名绑定：
<div class="content" :class="{ active: isOpen }">
<slot></slot>
</div>多面板互斥展开
实现多个折叠面板中同时只展开一个的需求：
export default {
props: {
title: String,
name: String
},
data() {
return {
isOpen: false
}
},
methods: {
toggle() {
this.$parent.$emit('toggle', this.name)
}
},
created() {
this.$parent.$on('toggle', name => {
this.isOpen = name === this.name
})
}
}父组件中需要包裹所有面板：
<template>
<div>
<collapse-panel v-for="item in items" :key="item.name" :title="item.title" :name="item.name"></collapse-panel>
</div>
</template>使用第三方库
对于更复杂的需求，可以考虑使用现成的Vue组件库：
- Element UI的
el-collapse - Ant Design Vue的
a-collapse - Bootstrap Vue的
b-collapse
这些库提供了开箱即用的折叠面板组件，支持丰富的配置选项和样式定制。
注意事项
实现时需要考虑以下几点：
- 动画性能优化，避免使用
height: auto作为过渡属性 - 无障碍访问，添加适当的ARIA属性
- 移动端触摸事件支持
- 嵌套折叠面板时的层级管理
以上方案可以根据实际项目需求进行组合或调整，实现不同复杂度的折叠面板功能。
