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 折叠面板打开时的动画组件,将会在之后的分享中讲解,组件大致如下:

相关推荐
张元清38 分钟前
React Observer Hooks:7 种监听 DOM 而不写样板代码的方式
前端·javascript·面试
竹林8181 小时前
Next.js + wagmi v2 踩坑实录:开发 NFT 交易市场时,我如何处理离线签名和链下元数据
javascript·next.js
前端Hardy1 小时前
谁还没⽤过shadcn/ui?114k+星标,不装NPM包,前端组件自由终于实现了
前端·javascript·vue.js
猪猪聪明_V2 小时前
前端码农的本地项目启动器
前端·javascript
暗不需求2 小时前
前端性能优化 防抖与节流完全指南:从原理到最佳实践
前端·javascript·面试
@大迁世界2 小时前
45.什么是内联条件表达式(inline conditional expressions)?在事件处理里怎么用?
开发语言·前端·javascript·react.js·ecmascript
我胖虎不答应!!3 小时前
Three.js开发思想笔记
javascript·笔记·three.js
一颗趴菜3 小时前
微信小程序如何去下载PDF呢
前端·javascript
zithern_juejin4 小时前
JS深拷贝与浅拷贝
javascript
前端毕业班4 小时前
前端"枚举"管理指南
前端·javascript