更新于：

系统组件

  • 开发指南
  • 前端手册 Vue 3
芋道源码
2022-12-31
目录

系统组件

# 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 中只有 ElLoading 与 ElScrollbar 进行全局注册，举个例子：

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

← 通用方法→

快来参与讨论吧
博客近期分类标签归档
站点公共服务ChatGPT文件资源公共接口
社交友人帐留言板在追番还追剧
更多本站动态联系博主GitHubGitee

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