基于vue3的设计器,可视化开发页面表单
npm install justin-intelligent-form
智能表单设计器,是一个功能强大、开箱即用的拖拽式低代码设计器。它基于 Vue3 开发,兼容多套 UI 组件库,除了基础的页面设计功能,EDesigner 还提供了强大的扩展功能,可以让开发者根据自己的需求自由扩展和定制组件。使用 JSON 配置来生成页面,可帮助开发者快速生成页面,提高开发效率。它提供了两个重要组件:e-designer 设计器和 e-builder 生成器。
e-designer 是一个可视化设计器组件,用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项,用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能,用户可以随时查看所设计页面的效果。最终,用户可以将 JSON 配置导出,用于页面的生成和修改。
e-builder 是一个页面构建组件,它可以将设计器生成的 JSON 配置构建成页面,完成组件的渲染、事件绑定和数据回显等操作。
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;
``