ruoyi-vue-pro 开发指南
  • 开发指南
  • 前端手册 Vue 3.x
芋道源码
2022-12-31
目录
1. 常用组件
1.1 Editor 富文本组件
1.2 Dialog 弹窗组件
1.3 ContentWrap 包裹组件
1.4 Pagination 分页组件
1.5 UploadFile 上传文件组件
1.6 UploadImg 上传图片组件
2. 不常用组件
2.1 EChart 图表组件
2.2 InputPassword 密码输入框
2.3 ContentDetailWrap 详情包裹组件
2.4 ImageViewer 图片预览组件
2.5 Qrcode 二维码组件
2.6 Highlight 高亮组件
2.7 Error 缺省组件
2.8 Sticky 黏性组件
2.9 CountTo 数字动画组件
2.10 useWatermark 水印组件
2.11 form-create 动态表单生成器
2.12 bpmn-js 工作流组件
3. 组件注册
3.1 按需引入
3.2 全局注册

系统组件

# 1. 常用组件

# 1.1 Editor 富文本组件

基于 wangEditor (opens new window) 封装

Editor 富文本组件

# 1.2 Dialog 弹窗组件

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

Dialog 弹窗组件

# 1.3 ContentWrap 包裹组件

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

ContentWrap 包裹组件

# 1.4 Pagination 分页组件

对 Element Plus 的 Pagination (opens new window) 组件进行封装

Pagination 分页组件

# 1.5 UploadFile 上传文件组件

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

# 1.6 UploadImg 上传图片组件

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

UploadImg 上传图片组件

# 2. 不常用组件

# 2.1 EChart 图表组件

基于 Apache ECharts (opens new window) 封装，自适应窗口大小

EChart 图表组件

# 2.2 InputPassword 密码输入框

对 Element Plus 的 Input 组件进行封装

# 2.3 ContentDetailWrap 详情包裹组件

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

# 2.4 ImageViewer 图片预览组件

将 Element Plus 的 ImageViewer (opens new window) 组件函数化，通过函数方便创建组件

# 2.5 Qrcode 二维码组件

基于 qrcode (opens new window) 封装

Qrcode 二维码组件

# 2.6 Highlight 高亮组件

Highlight 高亮组件

# 2.6.1 Infotip 信息提示组件

基于 Highlight 组件封装

Infotip 信息提示组件

# 2.7 Error 缺省组件

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

# 2.8 Sticky 黏性组件

Sticky 信息提示组件

# 2.9 CountTo 数字动画组件

# 2.10 useWatermark 水印组件

为元素设置水印

useWatermark 水印组件

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

详细文档：http://www.form-create.com/ (opens new window)

① 实战案例 - 表单设计：src/views/infra/build/index.vue (opens new window)

表单设计

② 实战案例 - 表单展示：src/views/bpm/processInstance/detail/index.vue (opens new window)

表单展示

# 2.12 bpmn-js 工作流组件

核心是基于 bpmn-js (opens new window) 封装

# 2.12.1 MyProcessDesigner 流程设计组件

MyProcessDesigner 流程设计组件

# 2.12.2 MyProcessViewer 流程展示组件

MyProcessViewer 流程展示组件

# 3. 组件注册

友情提示：

该小节，基于 《vue element plus admin —— 组件注册 》 (opens new window) 的内容修改。

组件注册可以分成两种类型：按需引入、全局注册。

# 3.1 按需引入

项目目前的组件注册机制是按需注册，是在需要用到的页面才引入。

<script setup lang="ts">
import { ElBacktop } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'

const { getPrefixCls, variables } = useDesign()

const prefixCls = getPrefixCls('backtop')
</script>

<template>
  <ElBacktop
    :class="`${prefixCls}-backtop`"
    :target="`.${variables.namespace}-layout-content-scrollbar .${variables.elNamespace}-scrollbar__wrap`"
  />
</template>

注意：tsx 文件内不能使用全局注册组件，需要手动引入组件使用。

# 3.2 全局注册

如果觉得按需引入太麻烦，可以进行全局注册，在 src/components/index.ts (opens new window)，添加需要注册的组件。

以 Icon 组件进行了全局注册，举个例子：

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)
  })
}
字典数据
通用方法

← 通用方法→

Theme by Vdoing | Copyright © 2019-2024 芋道源码 | MIT License
×