element-ui collapse 组件源码分享

今日简单分享 collapse 组件的源码实现,主要分为四个方面:

1、collapse 组件页面结构

2、collapse 组件属性

3、collapse 组件事件

4、collapse item 组件属性

一、collapse 组件页面结构

二、collapse 组件属性

2.1 value/v-model 属性,当前激活的面板(如果是手风琴模式,绑定值类型需要为string,否则为array),类型 string,无默认值。

组件属性使用及展示效果:

2.2 accordion 属性,是否手风琴模式,类型 boolean,默认 false。

组件属性使用及展示效果:

三、collapse 组件事件

3.1 change 事件,当前激活面板改变时触发(如果是手风琴模式,参数 activeNames 类型为string,否则为array),回调函数 (activeNames: array / string)。

四、collapse item 组件属性

4.1 name 属性,唯一标志符,类型 string/number,无默认值。

组件属性使用及展示效果:

4.2 title 属性,面板标题,类型 string,无默认值

组件属性使用及展示效果:

4.3 disabled 属性,是否禁用,类型 boolean,无默认值。

组件属性使用及展示效果:

留一个小尾巴,el-collapse-transition 折叠面板打开时的动画组件,将会在之后的分享中讲解,组件大致如下:

相关推荐
SRET2 小时前
Mineradio 沙盒隔离安装完全指南 | 一键安全运行 Electron 应用!!!
javascript·经验分享·安全·electron·aigc·音视频·ai编程
全栈前端老曹2 小时前
【MongoDB】安全与权限管理 —— 用户认证、角色权限、SSL 加密
前端·javascript·数据库·安全·mongodb·nosql·ssl
free355 小时前
作用域链与 Environment:变量查找、遮蔽和赋值怎么实现
javascript
YHL5 小时前
🤖 Agent 智能体开发实战 · 第一课:Tool Use —— 让大模型自动干活
前端·javascript·人工智能
HUMHSX7 小时前
Vue 组件通信核心知识点梳理
javascript·vue.js·ecmascript
风止何安啊7 小时前
🚦 前端并发请求 “交通管制”:别让你的接口堵成早高峰
前端·javascript·面试
李明卫杭州7 小时前
Vue2 & Vue3 中 Router `props` 配置详解:彻底摆脱 `$route` 依赖
前端·vue.js·前端框架
熊猫钓鱼>_>7 小时前
2026 前端的三场底层革命:当 Vue、React Native 和 Three.js 同时去掉中间层
前端·javascript·vue.js·react native·架构·webgl·three.js
名字还没想好☜8 小时前
React useEffect 依赖数组踩坑:闭包陷阱与清理函数
前端·javascript·react.js·react·useeffect
柒和远方9 小时前
LeetCode 4. 寻找两个正序数组的中位数 —— 二分划分的艺术
javascript·python·算法