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

相关推荐
小小小小宇3 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐5 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121385 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴6 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript