justin-intelligent-form

一个开箱即用的拖拽式的可视化低代码设计器

📦github仓库：https://github.com/yingzhixiaoyi/intelligentForm

#### 演示视频

https://github.com/yingzhixiaoyi/intelligentForm/assets/57881800/d3a7df15-06e0-4741-9547-ed55bfa523fa

#### 演示图片

!演示图片

简介

智能表单设计器，是一个功能强大、开箱即用的拖拽式低代码设计器。它基于 Vue3 开发，兼容多套 UI 组件库，除了基础的页面设计功能，EDesigner 还提供了强大的扩展功能，可以让开发者根据自己的需求自由扩展和定制组件。使用 JSON 配置来生成页面，可帮助开发者快速生成页面，提高开发效率。它提供了两个重要组件：e-designer 设计器和 e-builder 生成器。

核心组件介绍

#### e-designer 设计器

e-designer 是一个可视化设计器组件，用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项，用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能，用户可以随时查看所设计页面的效果。最终，用户可以将 JSON 配置导出，用于页面的生成和修改。

#### e-builder 生成器

e-builder 是一个页面构建组件，它可以将设计器生成的 JSON 配置构建成页面，完成组件的渲染、事件绑定和数据回显等操作。

安装 justin-intelligent-form

bash

npm i justin-intelligent-form





justin-intelligent-form 目标是支持多 UI 兼容,目前支持以下 UI



- element-plus

- ant-design-vue

- naive-ui



选择 UI 组件库



- ### 选择 element-plus

bash

npm i element-plus





main.ts 或者 main.js 引入注册组件

javascript

// 引入Element plus样式

import "element-plus/dist/index.css";

// 引入k-designer样式

import "justin-intelligent-form/dist/style.css";

import { pluginManager, setupElementPlus } from "justin-intelligent-form";

// 注册Element UI

setupElementPlus(pluginManager);





- ### 选择 ant-design-vue

bash

npm i ant-design-vue





main.ts 或者 main.js 引入注册组件

javascript

// 引入k-designer样式

import "justin-intelligent-form/dist/style.css";

// 引入antd UI 重置样式

import "ant-design-vue/dist/reset.css";

import { pluginManager, setupAntd } from "justin-intelligent-form";

// 使用Antd UI

setupAntd(pluginManager);



- #### 注：ant-design-vue v3.x版本需要改成下面方式

javascript

// 引入antd UI样式

import "ant-design-vue/dist/antd.css";

// 引入k-designer样式

import "justin-intelligent-form/dist/style.css";

import { pluginManager, setupAntdV3 } from "justin-intelligent-form";

// 使用Antd UI

setupAntdV3(pluginManager);







- ### 选择 naive-ui





main.ts 或者 main.js 引入注册组件

javascript

// 引入k-designer样式

import "justin-intelligent-form/dist/style.css";

import { pluginManager, setupNaiveUi } from "justin-intelligent-form";

// 注册Naive Ui

setupNaiveUi(pluginManager);





EDesigner(设计器) 基础用法

vue



EBuilder(生成器) 基础用法

vue





#### EDesigner(设计器) 调用外部方法

vue





#### EDesigner(设计器) 模板操作方法

ts

    /**

     * 添加模板方法

     *

     */

    addModulesMethod(data: PageSchema): void;

    /**

     * 添加模板方法

     *

     */

    setModulesMethod(data: any): void;

    /**

     * 清空模板方法

     *

     */

    resetModulesMethod(data: PageSchema): void;