Luckean's blog

Appearance

系统组件 ​

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

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

javascript

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 组件进行了全局注册，举个例子：

typescript
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 进行全局注册，举个例子：

typescript
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)
  })
}

Lucking

粤ICP备2022078904号-1