1.0.2 • Published 2 months ago
xyg-form v1.0.2
📖文档地址:https://kcz66.gitee.io/epic-designer/
💎项目预览地址:
- element-plus:https://epic.kcz66.com/demo/element-plus/
- antdv3:https://epic.kcz66.com/demo/antdv3/
- naive-ui:https://epic.kcz66.com/demo/naive-ui/
功能
- 拖拽设计
- 自定义 actionBar
- 布局组件扩展
- 自定义组件扩展
- 事件扩展
- 组件懒加载
- 完善布局
- 组件属性自定义
- 支持不同 UI
- 插件扩展
核心组件介绍
e-designer 设计器
e-designer
是一个可视化设计器组件,用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项,用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能,用户可以随时查看所设计页面的效果。最终,用户可以将 JSON 配置导出,用于页面的生成和修改。
e-builder 生成器
e-builder
是一个页面构建组件,它可以将设计器生成的 JSON 配置构建成页面,完成组件的渲染、事件绑定和数据回显等操作。
安装 epic-designer
npm i epic-designer
epic-designer 目标是支持多 UI 兼容,目前支持以下 UI
- element-plus
- ant-design-vue
- naive-ui
选择 UI 组件库
选择 element-plus
npm i element-plus
main.ts 或者 main.js 引入注册组件
// 引入Element plus样式
import "element-plus/dist/index.css";
// 引入k-designer样式
import "epic-designer/dist/style.css";
import { setupElementPlus } from "epic-designer";
// 注册Element UI
setupElementPlus();
选择 ant-design-vue v4.x版本(antd推荐使用v4.x版本)
npm i ant-design-vue
main.ts 或者 main.js 引入注册组件
// 引入k-designer样式
import "epic-designer/dist/style.css";
// 引入antd UI 重置样式
import "ant-design-vue/dist/reset.css";
import { setupAntd } from "epic-designer";
// 使用Antd UI
setupAntd();
注:ant-design-vue v3.x版本需要改成下面方式
// 引入antd UI样式
import "ant-design-vue/dist/antd.css";
// 引入k-designer样式
import "epic-designer/dist/style.css";
import { setupAntdV3 } from "epic-designer";
// 使用Antd UI
setupAntdV3();
选择 naive-ui
main.ts 或者 main.js 引入注册组件
// 引入k-designer样式
import "epic-designer/dist/style.css";
import { setupNaiveUi } from "epic-designer";
// 注册Naive Ui
setupNaiveUi();
EDesigner(设计器) 基础用法
<template>
<div class="h-full">
<EDesigner />
</div>
</template>
<script setup lang="ts">
import { EDesigner } from "epic-designer";
</script>
<style>
.h-full {
height: 100vh;
}
</style>
EBuilder(生成器) 基础用法
<template>
<div>
<EBuilder :pageSchema="pageSchema" />
</div>
</template>
<script setup>
import { EBuilder } from "epic-designer";
const pageSchema = {
schemas: [
{
type: "page",
id: "root",
children: [
{
label: "输入框",
type: "input",
field: "input",
icon: "epic-icon-write",
input: true,
componentProps: {
defaultValue: "",
placeholder: "请输入",
size: "default",
type: "text",
},
id: "gbm1xhrrj5s00",
},
],
componentProps: {
style: {
padding: "16px",
},
},
},
],
};
</script>