Skip to content

组件总览

组件是管理端二开的高频入口。这里不先讲实现细节,而是先帮你按使用场景找到入口,再进入具体文档。

先看什么?

你要做什么推荐组件
快速搭建增删改查页面CURD 快速开发
让表单自动选字典值DictSelect 字典选择器
让表格展示字典标签DictTag 字典标签
在表单里选图标IconSelect 图标选择器
在弹窗里选一条记录TableSelect 表格选择器
上传图片或文件Upload 上传
查看图表、滚动文本、复制按钮展示组件
调整布局、主题、语言布局组件

组件分类

表单组件

组件说明文档
IconSelect图标选择器,支持搜索和分页查看
DictSelect字典选择器,支持下拉、单选、复选查看
DictTag字典标签,用于展示字典值查看
TableSelect表格选择器,支持单选和多选查看
InputTag标签输入组件查看

上传组件

组件说明文档
SingleImageUpload单图上传查看
MultiImageUpload多图上传查看
FileUpload文件上传查看
WangEditor富文本编辑器查看

展示组件

组件说明文档
ECharts图表组件,支持柱状图、折线图、饼图查看
TextScroll文字滚动组件查看
CopyButton复制按钮组件查看

CURD 组件

组件说明文档
PageSearch搜索表单组件查看
PageContent数据列表组件查看
PageModal表单弹窗组件查看
usePage页面逻辑组合函数查看

布局组件

组件说明文档
Breadcrumb面包屑导航查看
Hamburger菜单折叠按钮查看
Fullscreen全屏切换组件查看
ThemeSwitch主题切换组件查看
SizeSelect尺寸选择组件查看
LangSelect语言选择组件查看
TenantSwitcher租户切换组件查看

功能组件

组件说明文档
CommandPalette命令面板,快捷搜索菜单查看
NoticeDropdown通知下拉组件查看
Pagination分页组件查看
OperationColumn操作列组件查看

使用方式

自动导入

项目使用 unplugin-vue-components 实现组件自动导入,无需手动注册。

vue
<template>
  <div>
    <IconSelect v-model="icon" />
    <DictSelect v-model="value" code="gender" />
  </div>
</template>

示例页面

所有组件都在 src/views/demo 目录下提供了完整的使用示例。

  1. 启动项目:pnpm run dev
  2. 登录系统
  3. 导航到「功能演示」菜单

下一步

  • 先看 CURD 快速开发 把常用页面跑起来。
  • 需要某个表单或展示能力时,直接从上面的分类表里找。
  • 想看可复用逻辑,继续看 Composables

基于 MIT 许可发布 · 如需部署协助或二开定制,请查看 支持与合作