# vue-form-making

**Repository Path**: xiaofanger/vue-form-making

## Basic Information

- **Project Name**: vue-form-making
- **Description**: 基于Vue的表单设计器，让表单开发简单而高效。
- **Primary Language**: JavaScript
- **License**: LGPL-3.0
- **Default Branch**: master
- **Homepage**: http://xiaofanger.gitee.io/vue-form-making
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 1126
- **Created**: 2019-12-07
- **Last Updated**: 2023-02-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-form-making

简体中文 | [English](./README.md)

## 简介

基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element) 实现的表单设计器，使用了最新的前端技术栈，内置了 i18n 国际化解决方案，可以让表单开发简单而高效。

- [在线预览](http://form.xiaoyaoji.cn/basic-version)

- [使用文档](http://docs.form.xiaoyaoji.cn)

- [高级版本](http://form.xiaoyaoji.cn) 提供了更多的组件和操作API

## 特性

* 可视化配置页面
* 提供栅格布局，并采用flex实现对齐
* 一键预览配置的效果
* 一键生成配置json数据
* 一键生成代码，立即可运行
* 提供自定义组件满足用户自定义需求
* 提供远端数据接口，方便用户需要异步获取数据加载
* 提供功能强大的高级组件
* 支持表单验证
* 快速获取表单数据
* 国际化支持

## 组件

- [MakingForm](http://docs.form.xiaoyaoji.cn/zh/guide/making-form.html) 表单设计器（基于可视化操作快速设计出表单页面，并获取到表单配置 json 数据）。

- [GenerateForm](http://docs.form.xiaoyaoji.cn/zh/guide/generate-form.html) 表单生成器（根据设计器中获取的配置 json 数据，快速渲染出表单页面）。

## 二次开发

### 扩展表单属性

扩展表单属性涉及三个文件：

- src/components/Container.vue
- src/components/FormConfig.vue
- src/components/GenerateForm.vue

#### 1. 添加配置参数

在 `src/components/Container.vue` 添加配置参数。

```vue
<script>
  export default {
    // ...
   	data () {
      return {
        widgetForm: {
          list: [],
          config: {
            labelWidth: 100,
            labelPosition: 'top',
            size: 'small'
            // 在此处扩展表单的配置信息
          },
        },
      }
    }
  }
</script>
```

#### 2. 扩展设计器配置

`src/components/FormConfig.vue` 下添加对表单的配置，
其中 `props.data` 是上面配置的 `widgetForm.config`。

#### 3. 添加渲染信息

配置完成后，最后就是渲染，在 `src/components/GenerateForm.vue` 下添加自己增加的配置，即完成了对表单属性的扩展。

### 扩展组件

#### 1. 添加自定义组件信息

#### 2. 引用组件

#### 3. 添加组件配置信息

在`src/components/WidgetConfig.vue` 下根据自己要求添加配置信息, `props.data` 结构为上面的配置信息，至此，自定义扩展的组件就成功的引入到设计器中。

### 自定义图标




## 支持

* 如果你发现了新的 bug，或者有新的 feature request，请新建一个 issue

## 捐赠 

如果觉得还不错，请作者喝杯咖啡吧 ☺

![](http://docs.form.xiaoyaoji.cn/donation.jpeg)

[PayPal Me](https://paypal.me/gavinzhulei)

## Browsers support

Modern browsers and Internet Explorer 10+.

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
| --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions

## 开源协议

[LGPL](https://opensource.org/licenses/LGPL-3.0)

您可以将 vue-form-making 源码用于 LGPL 协议的开源项目中，并保留版权信息。

## 商业许可

如果要将 vue-form-making 源码使用在非开源站点，项目和应用程序中，为保障您的合法权益，需购买[商业授权](http://form.xiaoyaoji.cn/pricing)。