RuoYi-Vue-Pro 文档

Appearance

2026-06-11
2261
11.6m

系统组件 ​

# 1. 常用组件 ​

# 1.1 Editor 富文本组件 ​

基于 wangEditor 封装

# 1.2 Dialog 弹窗组件 ​

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

# 1.3 ContentWrap 包裹组件 ​

对 Element Plus 的 ElCard 组件进行封装，自带标题、边距

# 1.4 Pagination 分页组件 ​

对 Element Plus 的 Pagination 组件进行封装

# 1.5 UploadFile 上传文件组件 ​

对 Element Plus 的 Upload 组件进行封装，上传文件到文件服务

# 1.6 UploadImg 上传图片组件 ​

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

# 2. 不常用组件 ​

# 2.1 EChart 图表组件 ​

基于 Apache ECharts 封装，自适应窗口大小

# 2.2 InputPassword 密码输入框 ​

对 Element Plus 的 Input 组件进行封装

# 2.3 ContentDetailWrap 详情包裹组件 ​

用于展示详情，自带返回按钮。

# 2.4 ImageViewer 图片预览组件 ​

将 Element Plus 的 ImageViewer 组件函数化，通过函数方便创建组件

# 2.5 Qrcode 二维码组件 ​

基于 qrcode 封装

# 2.6 Highlight 高亮组件 ​

# 2.6.1 Infotip 信息提示组件 ​

基于 Highlight 组件封装

# 2.7 Error 缺省组件 ​

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

# 2.8 Sticky 黏性组件 ​

# 2.9 CountTo 数字动画组件 ​

# 2.10 useWatermark 水印组件 ​

为元素设置水印

# 2.11 form-create 动态表单生成器 ​

详细文档：http://www.form-create.com/ ① 实战案例 - 表单设计：src/views/infra/build/index.vue表单设计 ② 实战案例 - 表单展示：src/views/bpm/processInstance/detail/index.vue表单展示

# 2.12 bpmn-js 工作流组件 ​

核心是基于 bpmn-js 封装

# 2.12.1 MyProcessDesigner 流程设计组件 ​

# 2.12.2 MyProcessViewer 流程展示组件 ​

# 3. 组件注册 ​

友情提示： 该小节，基于 《vue element plus admin —— 组件注册 》 的内容修改。 组件注册可以分成两种类型：按需引入、全局注册。

# 3.1 按需引入 ​

项目目前的组件注册机制是按需注册，是在需要用到的页面才引入。 import { ElBacktop } from 'element-plus' import { useDesign } from '@/hooks/web/useDesign' const { getPrefixCls, variables } = useDesign() const prefixCls = getPrefixCls('backtop') 注意：tsx 文件内不能使用全局注册组件，需要手动引入组件使用。

# 3.2 全局注册 ​

如果觉得按需引入太麻烦，可以进行全局注册，在 src/components/index.ts，添加需要注册的组件。 以 Icon 组件进行了全局注册，举个例子： import type { App } from 'vue' import { Icon } from './Icon' export const setupGlobCom = (app: App): void => { app.component('Icon', Icon) } 如果 Element Plus 的组件需要全局注册，在 src/plugins/elementPlus/index.ts 添加需要注册的组件。 以 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) }) } .pageB img{width:80px!important;} .wwads-horizontal .wwads-text, .wwads-content .wwads-text{line-height:1;} 字典数据 通用方法 ← 字典数据 通用方法→ Theme by Vdoing | Copyright © 2019-2026 芋道源码 | MIT License

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式 × .windowRB{ padding: 0;} .windowRB .wwads-img{margin-top: 10px;} .windowRB .wwads-content{margin: 0 10px 10px 10px;} .custom-html-window-rb .close-but{ display: none; }
最近更新