系统组件

## 1. 常用组件
1.1 Editor 富文本组件
- 基于[ wangEditor](https://www.wangeditor.com/ " wangEditor") 封装
- 详细文档：[vue-element-plus-admin-doc/components/editor.html](https://element-plus-admin-doc.cn/components/editor.html "vue-element-plus-admin-doc/components/editor.html")

![](/media/202409/2024-09-02_102636_942328.png)

### 1.2 Dialog 弹窗组件
对 Element Plus 的 Dialog 组件进行封装，支持最大化、最大高度等特性

- Dialog 组件：位于 src/components/Dialog (opens new window)内
- 详细文档：vue-element-plus-admin-doc/components/dialog.html

![](/media/202409/2024-09-02_103019_820051.png)

### 1.3 ContentWrap 包裹组件
对 Element Plus 的 ElCard 组件进行封装，自带标题、边距
ContentWrap 组件：位于 src/components/ContentWrap 内
实战案例：src/views/system/post/index.vue

![](/media/202409/2024-09-02_103111_043783.png)

### 1.4 Pagination 分页组件
对 Element Plus 的 Pagination组件进行封装

Pagination 组件：位于 src/components/Pagination内
实战案例：src/views/system/post/index.vue

![](/media/202409/2024-09-02_103342_101675.png)

#1.5 UploadFile 上传文件组件
对 Element Plus 的 Upload (opens new window)组件进行封装，上传文件到文件服务

- UploadFile 组件：位src/components/UploadFile/src/UploadFile.vue (opens new window)内
- 实战案例：暂无

### 1.6 UploadImg 上传图片组件
对 Element Plus 的 Upload组件进行封装，上传图片到文件服务

- UploadImg 组件：位于 src/components/UploadFile/src/UploadImg.vue (opens new window)内
- 实战案例：src/views/system/oauth2/client/ClientForm.vue

![](/media/202409/2024-09-02_103532_810403.png)

## 2. 不常用组件
### 2.1 EChart 图表组件
基于 Apache ECharts封装，自适应窗口大小
EChart 组件：位于 src/components/EChart 内
详细文档：vue-element-plus-admin-doc/components/echart.html(opens new window)
实战案例：src/views/mp/statistics/index.vue

![](/media/202409/2024-09-02_103610_312208.png)

2.2 InputPassword 密码输入框
对 Element Plus 的 Input 组件进行封装

InputPassword 组件：位于 src/components/InputPassword (opens new window)内
详细文档：vue-element-plus-admin-doc/components/input-password.html(opens new window)
实战案例：src/views/Profile/components/ResetPwd.vue(opens new window)

### 2.3 ContentDetailWrap 详情包裹组件
用于展示详情，自带返回按钮。

ContentDetailWrap 组件：位于 src/components/ContentDetailWrap 内
详细文档：[vue-element-plus-admin-doc/components/content-detail-wrap.html](https://element-plus-admin-doc.cn/components/input-password.html "vue-element-plus-admin-doc/components/content-detail-wrap.html")

### 2.4 ImageViewer 图片预览组件
将 Element Plus 的 [ImageViewer](https://element-plus.org/en-US/component/image.html#image-viewer-attributes "ImageViewer") (opens new window)组件函数化，通过函数方便创建组件

详细文档：[vue-element-plus-admin-doc/components/image-viewer.html](https://element-plus-admin-doc.cn/components/content-detail-wrap.html "vue-element-plus-admin-doc/components/image-viewer.html")

### 2.5 Qrcode 二维码组件
基于[ qrcode](https://www.npmjs.com/package/qrcode " qrcode") 封装

详细文档：[vue-element-plus-admin-doc/components/qrcode.html(opens new window)](https://element-plus-admin-doc.cn/components/qrcode.html "vue-element-plus-admin-doc/components/qrcode.html(opens new window)")

![](/media/202409/2024-09-02_104018_365110.png)

### 2.6 Highlight 高亮组件

详细文档：[vue-element-plus-admin-doc/components/highlight.html(opens new window)](https://element-plus-admin-doc.cn/components/highlight.html "vue-element-plus-admin-doc/components/highlight.html(opens new window)")
Highlight 高亮组件

### 2.6.1 Infotip 信息提示组件
基于 Highlight 组件封装

详细文档：详细文档：[vue-element-plus-admin-doc/components/infotip.html](https://element-plus-admin-doc.cn/components/infotip.html "vue-element-plus-admin-doc/components/infotip.html")

![](/media/202409/2024-09-02_104513_874253.png)

### 2.7 Error 缺省组件
用于各种占位图组件，如 404、403、500 等错误页面。

详细文档：[vue-element-plus-admin-doc/components/error.html](https://element-plus-admin-doc.cn/components/error.html "vue-element-plus-admin-doc/components/error.html")
实战案例：403.vue (opens new window)、404.vue (opens new window)、500.vue(opens new window)

#2.8 Sticky 黏性组件
详细文档：[vue-element-plus-admin-doc/components/sticky.html](https://element-plus-admin-doc.cn/components/sticky.html "vue-element-plus-admin-doc/components/sticky.html")

![](/media/202409/2024-09-02_104735_690448.png)

### 2.9 CountTo 数字动画组件

详细文档：[vue-element-plus-admin-doc/components/count-to.html](https://element-plus-admin-doc.cn/components/count-to.html "vue-element-plus-admin-doc/components/count-to.html")
实战案例：暂无

### 2.10 useWatermark 水印组件
为元素设置水印
详细文档：[vue-element-plus-admin-doc/hooks/useWatermark.html](https://element-plus-admin-doc.cn/hooks/useWatermark.html "vue-element-plus-admin-doc/hooks/useWatermark.html")
实战案例：暂无

![](/media/202409/2024-09-02_104925_341871.png)

### 2.11 form-create 动态表单生成器
详细文档：http://www.form-create.com/

① 实战案例 - 表单设计：src/views/infra/build/index.vue

![](/media/202409/2024-09-02_105022_077332.png)
② 实战案例 - 表单展示：src/views/bpm/processInstance/detail/index.vue

### 2.12 bpmn-js 工作流组件
核心是基于 [bpmn-js](https://bpmn.io/toolkit/bpmn-js/ "bpmn-js") 封装

### 2.12.1 MyProcessDesigner 流程设计组件
基于 https://gitee.com/MiyueSC/bpmn-process-designer项目适配

![](/media/202409/2024-09-02_105218_801920.png)

### 2.12.2 MyProcessViewer 流程展示组件
MyProcessViewer 组件

![](/media/202409/2024-09-02_105331_609598.png)

## 3. 组件注册

友情提示：
> 该小节，基于 [《vue element plus admin —— 组件注册 》](https://element-plus-admin-doc.cn/guide/component.html "《vue element plus admin —— 组件注册 》") (opens new window)的内容修改。

组件注册可以分成两种类型：按需引入、全局注册。
### 3.1 按需引入
项目目前的组件注册机制是按需注册，是在需要用到的页面才引入。
> import type { App } from 'vue'
import { Icon } from './Icon'
export const setupGlobCom = (app: App<Element>): void => {
 app.component('Icon', Icon)
}

如果 Element Plus 的组件需要全局注册，在 src/plugins/elementPlus/index.ts (opens new window)添加需要注册的组件。
以 Element Plus 中只有 ElLoading 与 ElScrollbar 进行全局注册，举个例子：

> import type { App } from 'vue'
// 需要全局引入一些组件，如 ElScrollbar，不然一些下拉项样式有问题
import { ElLoading, ElScrollbar } from 'element-plus'
const plugins = [ElLoading]
const components = [ElScrollbar]
export const setupElementPlus = (app: App) => {
 plugins.forEach((plugin) => {
 app.use(plugin)
 })
 components.forEach((component) => {
 app.component(component.name, component)
 })
}