Element Plus组件源码分析

一、组件介绍 el-form表单组件，是日常开发中使用频率很高的一个组件，通常由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。 大家应该对el-form组件十分熟悉，直接看源码吧

一、组件介绍 el-message是一个信息提示类组件，常用于系统级别的提醒，在我的项目中，会使用el-message组件展示用户的操作提示及操作结果，如：操作成功、操作失败：xxxx原因。 el-m

一、指令介绍 见名思意，click-outside指令是点击元素节点之外时进行相应的处理。 常见的用途是点击弹框之外的部分时关闭弹出框，在element-plus源码中被用于el-select/el-

一、组件介绍 el-overlay是element-plus内部使用的组件，官方文档没有给出此组件的相关描述。 该组件用于弹出一个覆盖层，被用于el-dialog和el-messagebox等组件中。

一、组件介绍 官网链接：Descriptions 组件 | Element (gitee.io)。 el-descriptions组件是一个展示类组件，其使用表格展示多个字段的信息；需要和el-des

一、组件介绍 element-plus的官方文档中没有ElPopper组件，ElPopper在其他组件内部使用，如：Select、Cascade、ColorPicker等组件中都用到了ElPopper

一、组件介绍 官网链接：ColorPicker 颜色选择器 | Element (gitee.io)。 ColorPicker颜色选择器组件，用于颜色选择，支持多种颜色格式。 1.1 属性 model

一、组件介绍 官网链接：Collapse 折叠面板 | Element (gitee.io) collapse折叠面板组件可以折叠/展开内容区域，通常与collapse-item组件组合使用。 1.1

一、组件介绍 官网链接：Checkbox 组件 | Element (gitee.io) Checkbox组件是日常最为常用的组件之一，用于用户勾选选项。 1.1 属性 1.1.1 值绑定相关 mod

一、组件介绍 官网链接：Carousel 组件 | Element (gitee.io)。 Carousel组件也称作轮播图，常用于网站首页进行Banner的轮播展示。 Carousel需要与Caro

一、组件介绍 官网链接：Calendar 组件 | Element (gitee.io) Calendar用于显示日期。 Element plus中的日期处理使用的是day.js，这个库大小只有2KB

一、组件介绍 官网链接：Button 组件 | Element (gitee.io) Button组件是最常用的组件之一，是常用的操作按钮。 1.1 属性 展示类： size: string类型，设置

一、组件介绍 官网链接：Breadcrumb 组件 | Element (gitee.io) Breadcrumb组件用于显示当前页面的路径，快速返回之前的任意页面；该组件需要与Breadcrumb

一、组件介绍 官网链接：Badge 组件 | Element (gitee.io) Badge组件常用于信息提示，如显示有xx条的通知/待办。 1.1 属性 value: number|string类

一、组件介绍 Backtop组件 官网链接 Backtop组件通常用于页面向下滚动后，提供快捷的返回顶部的按钮。 1.1 属性 target: string类型，滚动触发的对象，传入css元素选择器，

一、组件介绍 [官网链接](组件 | Element (gitee.io)) Avatar组件展示用户头像，可以采用图标、图片或者字符3种形式。 1.1 属性 通用属性： size: 设置头像的大小，

一、组件介绍 [官网链接](组件 | Element (gitee.io)) el-container组件是用于布局的容器组件，用于搭建页面的基本结构； 其通常与el-header、el-aside、

一、组件介绍 Alert组件用于页面中展示重要的提示信息，是页面中的非浮层元素，不会自动消失。详细可参看：[官网链接](组件 | Element (gitee.io)) 1.1 属性 title：标题

一、组件介绍 Affix组件用于将页面元素固定在特定可视区域。 1.1 属性 position：指定固钉的位置，可设置为top或bottom，默认为top offset: 设置偏移距离，默认为0 ta