前言
在现代网页设计和应用中,折叠面板(collapse panel)已成为一种非常实用的交互元素。它不仅能够节省页面空间,还能通过动态展示和隐藏内容,为用户提供更加流畅和个性化的浏览体验。本文将详细介绍如何开发一个基本的折叠面板组件。本文将从需求分析、确定方案、设计思路等方面进行介绍。
需求分析
折叠面板需要具备的功能:
- 展示多个列表,每个列表都具有标题和内容两部分
- 点击标题可以实现关闭和展示
- 再加一个手风琴模式
确定方案
- 分为两个组件,将列表作为一个组件,每组展示都需要一个父元素包裹
html
// Collaspe.vue
<template>
<div class="yv-collapse">
<slot></slot>
</div>
</template>
html
// CollapseItem.vue
<template>
<div class="yv-collapse-item">
<div class="yv-collapse-item__header">
// 具名插槽, 用来放标题
<slot name="title"></slot>
</div>
<div class="yv-collapse-item__wrapper">
<div class="yv-collapse-item__content" >
// 默认插槽, 用来放内容
<slot></slot>
</div>
</div>
</div>
</template>
- 确定属性
ts
export type NameType = string | number;
// 定义v-model和列表,将要呈现的列表相关信息放到一个数组管理
export interface CollapseProps {
// 当前打开的item, 可以是一个或者多个, 例如ref['a','b']
modelValue: NameType[];
// 是否支持手风琴模式,一个打开,另一个关闭
accordion?: boolean;
}
// item列表
export interface CollapseItemProps {
// name属性作为每个Item的标识符,不能重复
name: NameType;
title?: string;
// 禁用状态下不能操作该列表
disabled?: boolean;
}
- 确定事件
ts
export interface CollaspeEmits {
// 配合modelValue实现v-model
(e: "update:modelValue", values: NameType[]): void;
// change事件
(e: "change", values: NameType[]): void;
}
设计思路
- 在Collapse组件中用一个数组来保存打开的item的name属性
- 点击item的时候,先从数组中查找这个元素,也就是上边的name属性,在数组存在就删除,不在就添加,这样就实现了打开和关闭的状态改变
- 这个数组将由Collapse组件传递给CollapseItem
- 然后在Item组件内部,也就是CollapseItem组件内部,判断name是否存在于数组中,使用一个计算属性结合v-show,真正实现打开和关闭
代码实现
随后再写吧,先去吃饭了
总结
本文从需求分析,确定方案,设计思路四个方面简单介绍了Collapse组件的基本实现方式,具体代码实现后续补充,如有错误还请大佬评论指正。