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

相关推荐
脑袋大大的1 小时前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君011 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie2 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20152 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦3 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆3 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui