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

前言

在现代网页设计和应用中,折叠面板(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组件的基本实现方式,具体代码实现后续补充,如有错误还请大佬评论指正。

相关推荐
前端小菜袅10 小时前
uniapp配置自动导入uni生命周期等方法
前端·javascript·uni-app
Apifox10 小时前
如何在 Apifox 中通过 AI 一键生成几十个测试用例?
前端·后端·ai编程
你真的可爱呀10 小时前
uniapp学习【整体实践】
前端·学习·uni-app·实践
一枚前端小能手10 小时前
「周更第7期」实用JS库推荐:Vite
前端·javascript·vite
小中123411 小时前
异步请求的性能提升
前端
我是天龙_绍11 小时前
渐变层生成器——直接用鼠标拖拽就可以调整渐变层的各种参数,然后可以导出为svg格式
前端
我是天龙_绍11 小时前
Easing 曲线 easings.net
前端
知识分享小能手11 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
訾博ZiBo11 小时前
React组件复用导致的闪烁问题及通用解决方案
前端
Dever11 小时前
记一次 CORS 深水坑:开启 withCredentials 后Response headers 只剩 content-type
前端·javascript