# arco-design 表单设计器

**Repository Path**: it_guo/arco-design-designer

## Basic Information

- **Project Name**: arco-design 表单设计器
- **Description**: arco-design 表单设计器
- **Primary Language**: HTML/CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 22
- **Created**: 2024-08-07
- **Last Updated**: 2024-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![输入图片说明](image.png)
## 🐶 新手必读

* 演示地址：<http://60.205.158.103:6060>

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


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

> 如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！本项目还在不断开发完善中,如有任何建议或问题[请在这里提出](https://gitee.com/wei_wei001/arco-design-designer/issues/new)

**NodeJs:**

```shell
npm install arco-design-designer
```

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

```html
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);

```

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2024-present dotor-ww