目录

系统组件

# 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 按需引入

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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 组件进行了全局注册,举个例子:

1
2
3
4
5
6
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 中只有 ElLoadingElScrollbar 进行全局注册,举个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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)
})
}
上次更新: 2023/04/04, 22:45:16

本站由 钟意 使用 Stellar 1.28.1 主题创建。
又拍云 提供CDN加速/云存储服务
vercel 提供托管服务
湘ICP备2023019799号-1
总访问 次 | 本页访问