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) - ![image.png|1000](https://imagehosting4picgo.oss-cn-beijing.aliyuncs.com/imagehosting/fix-dir%2Fpicgo%2Fpicgo-clipboard-images%2F2024%2F07%2F18%2F20-50-33-d7ba3cb770080d4bdbb1c57898462122-20240718205032-1979b4.png) - 鼠标悬停在元素上时显示一个浮动的提示框,`el-tooltip` 组件 - ![image.png|500](https://imagehosting4picgo.oss-cn-beijing.aliyuncs.com/imagehosting/fix-dir%2Fpicgo%2Fpicgo-clipboard-images%2F2024%2F07%2F18%2F21-14-25-d20ef6e11b8af0c9814f12501e91edeb-20240718211424-f601cb.png) ``` ## 组件 我将为您整理一个包含这些组件及其版本信息的 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 | 全局水印码,截图时留痕 |