@dfsj/components

基于 Element Plus 的通用业务组件库，包含 Table/Form/BasicModal/Windows/Boards 等高级封装组件

简介

@dfsj/components 是基于 Element Plus 的通用业务组件库，提供 Table、Form、Modal、Windows、Boards 等高级封装组件，通过 Schema 驱动和 Hooks 配合大幅提升中后台表单表格场景的开发效率。

主要功能

• Table 表格 - 自动分页、列配置、行选择、操作列、图片预览
• Form 表单 - Schema 驱动表单，支持联动校验、20+ 表单组件类型
• BasicModal 弹窗 - 拖拽/全屏/自定义按钮/可收起
• Windows 窗口 - 多窗口管理器，可拖拽缩放
• Boards 抽屉 - 侧边抽屉管理器，支持宽度调整
• Editor 富文本 - 基于 WangEditor 封装
• UnifyChart 图表 - 通用图表容器
• Highlight 高亮 - 高亮选择组件
• InputPassword 密码 - 密码强度检测组件
• Descriptions 描述 - 描述列表组件
• ClickOutSide 点击外部 - 点击区域外检测组件
• NodeAxis 时间轴 - 时间轴节点组件
• Visual 播放器 - 可视化播放器组件

安装

pnpm add @dfsj/components

快速开始

<template>
  <Table :columns="columns" :data="data" :pagination="true" />
</template>

<script setup lang="ts">
import { Table, useTable } from '@dfsj/components'

const columns = [
  { field: 'name', label: '名称' },
  { field: 'age', label: '年龄' }
]

const [register, { getList }] = useTable({
  fetchDataApi: () => api.getList()
})
</script>

主要导出

| 导出名 | 类型 | 说明 | |:------|:-----|:-----| | Table | Component | 高级表格组件 (useTable 配合) | | Form | Component | Schema 驱动表单组件 | | BasicModal | Component | 弹窗组件（导出名为 BasicModal） | | Windows | Component | 窗口管理器组件 | | Boards | Component | 抽屉管理器组件 | | Editor | Component | 富文本编辑器组件 | | UnifyChart | Component | 统一图表容器组件 | | Highlight | Component | 高亮选择组件 | | InputPassword | Component | 密码强度输入框 | | Descriptions | Component | 描述列表组件 | | ClickOutSide | Component | 点击外部检测组件 | | NodeAxis | Component | 时间轴节点组件 | | Visual | Component | 可视化播放器组件 | | useTable | Function | 表格逻辑 Hook (泛型支持) | | useForm | Function | 表单逻辑 Hook |

完整 API 文档请查看 在线文档站

使用要求

| 环境 | 要求 | |:-----|:-----| | Node.js | >=18.12.0 | | Vue | >=3.5 | | Element Plus | >=2.11 |

开发指南

git clone http://10.10.12.18/dfsj/dfsj
pnpm install
cd packages/components
pnpm watch

文档

• 快速开始
• 完整API文档
• 更新日志

许可证

MIT

Copyright (c) 2022 - present yangbo