Element Plus 组件库实现：2. Collapse(1)

前言

在现代网页设计和应用中，折叠面板（collapse panel）已成为一种非常实用的交互元素。它不仅能够节省页面空间，还能通过动态展示和隐藏内容，为用户提供更加流畅和个性化的浏览体验。本文将详细介绍如何开发一个基本的折叠面板组件。本文将从需求分析、确定方案、设计思路等方面进行介绍。

需求分析

折叠面板需要具备的功能：

• 展示多个列表，每个列表都具有标题和内容两部分
• 点击标题可以实现关闭和展示
• 再加一个手风琴模式

确定方案

• 分为两个组件，将列表作为一个组件，每组展示都需要一个父元素包裹

// Collaspe.vue
<template>
    <div class="yv-collapse">
        <slot></slot>
    </div>
</template>

// 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>

• 确定属性

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;
}

• 确定事件

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组件的基本实现方式，具体代码实现后续补充，如有错误还请大佬评论指正。