@dfsj/components

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

主要导出

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

使用要求

开发指南

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

文档

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

许可证

MIT

Copyright (c) 2022 - present yangbo