组件

组件列表

组件名称	核心特性 / 说明	文件位置	实战案例
Editor 富文本组件	基于 wangEditor 封装	src/components/Editor	src/views/system/notice/NoticeForm.vue
Dialog 弹窗组件	封装 Element Plus Dialog，支持最大化、最大高度等特性	src/components/Dialog	src/views/system/dept/DeptForm.vue
ContentWrap 包裹组件	封装 Element Plus ElCard，自带标题、边距	src/components/ContentWrap	src/views/system/post/index.vue
Pagination 分页组件	封装 Element Plus Pagination	src/components/Pagination	src/views/system/post/index.vue
UploadFile 上传文件组件	封装 Element Plus Upload，用于上传文件到文件服务	src/components/UploadFile/src/UploadFile.vue
UploadImg 上传图片组件	封装 Element Plus Upload，用于上传图片到文件服务	src/components/UploadFile/src/UploadImg.vue	src/views/system/oauth2/client/ClientForm.vue
EChart 图表组件	基于 Apache ECharts 封装，自适应窗口大小	src/components/EChart	src/views/mp/statistics/index.vue
InputPassword 密码输入框	封装 Element Plus Input	src/components/InputPassword	src/views/Profile/components/ResetPwd.vue
ContentDetailWrap 详情包裹	展示详情，自带返回按钮	src/components/ContentDetailWrap
ImageViewer 图片预览	将 Element Plus ImageViewer 函数化，便于通过函数创建	src/components/ImageViewer
Qrcode 二维码组件	基于 qrcode 封装	src/components/Qrcode
Highlight 高亮组件	-	src/components/Highlight
Infotip 信息提示组件	基于 Highlight 组件封装	src/components/Infotip
Error 缺省组件	用于 404、403、500 等错误页面的占位图	src/components/Error	403.vue、404.vue、500.vue
Sticky 黏性组件	-	src/components/Sticky
CountTo 数字动画组件	-	src/components/CountTo
useWatermark 水印组件	为元素设置水印	src/hooks/web/useWatermark.ts

参考资料：系统组件

组件注册使用

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

按需引入

项目目前的组件注册机制是按需注册，是在需要用到的页面才引入。注意：tsx 文件内不能使用全局注册组件，需要手动引入组件使用。

vue

<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>

全局注册

文件： src/components/index.ts中，添加需要全局注册的组件。

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 添加需要注册的组件。以 Element Plus 中只有 ElLoading 与 ElScrollbar 进行全局注册，举个例子：

import type { App } from 'vue'
// 需要全局引入一些组件，如ElScrollbar，不然一些下拉项样式有问题
import { ElLoading, ElScrollbar, ElButton } from 'element-plus'

const plugins = [ElLoading]

const components = [ElScrollbar, ElButton]

export const setupElementPlus = (app: App<Element>) => {
  plugins.forEach((plugin) => {
    app.use(plugin)
  })

  components.forEach((component) => {
    app.component(component.name, component)
  })
}

参考资料：组件注册

组件 ​

组件列表 ​

组件注册使用 ​

按需引入 ​

全局注册 ​

组件

组件列表

组件注册使用

按需引入

全局注册