excerpt
<!-- more -->
excerpt
<!-- more -->
## 定义
- **简介**:Element UI 是一个基于 Vue.js 的桌面端 UI 组件库,由饿了么(Ele.me)前端团队开发和维护。
- **技术栈**:基于 Vue 2 开发。
```Java
1. **<el-container:用作整个页面的布局容器。
2. *el-header>:页面的头部区域。
3.el-main>:页面的主要内容区域,包含一个<el-card>组件。
4. el-card>:在主要内容区域内,用于展示独立的内容块。
5. el-footer>:页面的底部区域。
```
```Java
## 定义
**Element Plus**
- **简介**:Element Plus 是 [Element UI](Element%20UI) 的下一代版本,是为 Vue 3 设计和开发的 UI 组件库。
- **技术栈**:基于 Vue 3 开发。
- **特点**:除了继承 Element UI 的丰富组件外,还充分利用了 Vue 3 的新特性(如 Composition API)和性能改进。
- 需要给用户一些提示信息 [ElMessage](ElMessage)
- 
- 鼠标悬停在元素上时显示一个浮动的提示框,`el-tooltip` 组件
- 
```
## 组件
我将为您整理一个包含这些组件及其版本信息的 Markdown 表格。由于有些组件没有指定版本,我将假设它们是基础组件或较早的版本。
| 分类 | 组件 | 版本 |
| ------------- | ------------------ | ----------------------------- |
| Overview | Overview | - |
| Basic | Button | 点击搜索,触发搜索 |
| | Border | - |
| | Color | - |
| | Layout Container | - |
| | Icon | - |
| | Layout | - |
| | Link | - |
| | Text | - |
| | Scrollbar | |
| | Space | - |
| | Typography | - |
| Configuration | Config Provider | - |
| Form | Autocomplete | - |
| | Cascader | - |
| | Checkbox | - |
| | Color Picker | - |
| | Date Picker | - |
| | DateTime Picker | - |
| | Form | - |
| | Input | - |
| | Input Number | - |
| | Radio | - |
| | Rate | - |
| | Select | - |
| | Virtualized Select | - |
| | Slider | - |
| | Switch | - |
| | Time Picker | - |
| | Time Select | - |
| | Transfer | - |
| | TreeSelect | - |
| | Upload | |
| Data | Avatar | - |
| | Badge | - |
| | Calendar | - |
| | Card | - |
| | Carousel | - |
| | Collapse | 点击之后,向下展开 |
| | Descriptions | - |
| | Empty | - |
| | Image | - |
| | Infinite Scroll | - |
| | Pagination | - |
| | Progress | - |
| | Result | - |
| | Skeleton | - |
| | Table | 表格 |
| | Virtualized Table | |
| | Tag | 一堆 tag 标签,就像 B 站选主题一样 |
| | Timeline | 时间线 |
| | Tour | |
| | Tree | - |
| | Virtualized Tree | - |
| | Statistic | |
| | Segmented | |
| Navigation | Affix | - |
| | Anchor | |
| | Backtop | - |
| | Breadcrumb | - |
| | Dropdown | - |
| | Menu | - |
| | Page Header | - |
| | Steps | - |
| | Tabs | - |
| Feedback | Alert | - |
| | Dialog | 点击按钮后,出现一个悬浮卡片,可以做信息展示,也可以做确认 |
| | Drawer | - |
| | Loading | - |
| | Message | 弹出一个对话框,显示搜索成功或者失败 |
| | Message Box | - |
| | Notification | - |
| | Popconfirm | - |
| | Popover | - |
| | Tooltip | 鼠标悬停的时候出一个框,展示详情 |
| Others | Divider | 分割线,有点像 markdown 的 --- |
| | Watermark | 全局水印码,截图时留痕 |