Arco-design-designer NPM

输入图片说明

🐶 新手必读

演示地址：http://60.205.158.103:6060

arco-design-designer 是基于 @form-create/arco-design 实现的表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。

特点

使用JSON数据生成表单
支持扩展自定义组件
内置36个常用的表单组件和布局组件
提供丰富的表单操作API
支持子表单和分组
支持表格布局
支持表单验证
支持多语言

如果对您有帮助，您可以点右上角 "Star" 支持一下谢谢！本项目还在不断开发完善中,如有任何建议或问题请在这里提出

NodeJs:

npm install arco-design-designer

使用需要注意在main.ts增加引用组件如图所示

import FcDesigner from 'arco-design-designer'
import {
  Modal,
  Drawer,
  Space,
  Transfer,
  Tabs,
  Alert,
  Divider,
  TreeSelect,
  ColorPicker,
  Layout,
  Card,
  Popconfirm,
  Table,
  Pagination,
  Badge,
  Menu
} from '@arco-design/web-vue';
import '@arco-design/web-vue/es/transfer/style/index.less';
import '@arco-design/web-vue/es/tabs/style/index.less';
import '@arco-design/web-vue/es/alert/style/index.less';
import '@arco-design/web-vue/es/tree-select/style/index.less';
import '@arco-design/web-vue/es/drawer/style/index.less';
import '@arco-design/web-vue/es/card/style/index.less';
import '@arco-design/web-vue/es/popconfirm/style/index.less';
import '@arco-design/web-vue/es/table/style/index.less';
import '@arco-design/web-vue/es/pagination/style/index.less';
import '@arco-design/web-vue/es/divider/style/index.less';
import '@arco-design/web-vue/es/message/style/index.less';
import '@arco-design/web-vue/es/notification/style/index.less';
import '@arco-design/web-vue/es/modal/style/index.less';
import '@arco-design/web-vue/es/badge/style/index.less';
import formCreate from '@form-create/arco-design';
import install from '@form-create/arco-design/auto-import';
import FcDesigner from 'arco-design-designer';

formCreate.use(install);

app.use(Space);
app.use(Table);
app.use(Badge);
app.use(Menu);
app.use(Pagination);
app.use(Card);
app.use(Drawer);
app.use(Layout);
app.use(Popconfirm);
app.use(TreeSelect);
app.use(Tabs);
app.use(ColorPicker);
app.use(Divider);
app.use(Transfer);
app.use(Alert);
app.use(formCreate);
app.use(FcDesigner);

<fc-designer ref="designer"/>
designer.value?.getJson(); // 获取表单的生成规则
designer.value?.getOptionsJson(); // 获取表单的配置

回显操作
designer.value.setRule(form.value.rule);
designer.value.setOption(form.value.option);