# dg-form-making

**Repository Path**: zh8739/dg-form-making

## Basic Information

- **Project Name**: dg-form-making
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: LGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-07-10
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dg-form-making 

基于 GavinZhuLei/vue-form-making 进行量身开发，感谢 [GavinZhuLei/vue-form-making](https://github.com/GavinZhuLei/vue-form-making)

```
npm install -S dg-form-making 
```

#### 字段属性是否显示配置

- 默认全部显示 

如下，只显示标题配置

```html
<dg-making-form
  :widgetVisible="{
    title: true,
  }"
> 
</dg-making-form>
```

```js
widgetVisible: {
  title: true,    // 标题
  width: true,    // 宽
  size: true,     // 大小
  model: true,    // 绑定值
  handle: true,   // 操作属性
  placeholder: true,  // 占位内容
  layout: true,       // 布局方式 
  showInput: true,    // 显示输入框
  min: true,
  defaultValue: true,
  max: true,
  step: true,
  multiple: true,
  allowHalf: true,
  showAlpha: true,
  showLabel: true,
  staticRemoteOptions: true,  // 静态数据与远端数据的配置
  time: true, 
  date: true,
  required: true,   // 必填选项
  reg: true,        // 正则
  upload: true,     // 文件上传配置
}


```

```html
<template>
  <dg-making-form ref="makingForm" upload preview generate-code generate-json clearable :basic-components="basicComponents">
    <template slot="action">
    </template>
  </dg-making-form>
</template>

<script>
export default {
  data () {
    return {
      basicComponents: [
          {
          type: 'input',
          name: '单行文本',
          icon: 'icon-input',
          options: {
            width: '100%',
            defaultValue: '',
            required: false,
            dataType: 'string',
            pattern: '',
            placeholder: '',
            disabled: false,
          }
        },
        {
          type: 'textarea',
          name: '多行文本',
          icon: 'icon-diy-com-textarea',
          options: {
            width: '100%',
            defaultValue: '',
            required: false,
            disabled: false,
            pattern: '',
            placeholder: ''
          }
        }
      ]
    }
  },
  mounted () {
  }
}
</script>

```
- 1.0.2 级以前，组件的自定义功能，字段属性按需显示
- 1.0.3 在 Input 值改变时触发事件 ` @input-change ` 	
- 1.0.4 把 所有的基础组件值改变触发事件 `change` 去掉 1.0.3 的 `input-change`， 可以动态的配置 远端数据方法
- 1.0.5 增加组件 日期时间选择器, 修复 远端数据方法 在栅格布局出错的问题
- 1.0.6 打包出错，重新打包
- 1.0.7 增加上传文件组件, 校验的触发方式更为 blur
- 1.0.8 增加文字和分割线组件， input 和 textarea 为空时输入框能全部占满
- 1.0.9 由于element-ui版本问题，没有分割线插件问题，写自定义插件
- 1.0.10 取消冒号, 改造图片上传插件和文件上传插件 `fileUpload` 监听文件上传事件， 更改图标
- 1.0.11 由于项目在使用中，更改图标名字导致以前的图标显示不出来，改回原来的图标

### 基于作者之后新增的功能
1. 自定义表单字段内容

## form-making
基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来

工具地址：http://tools.xiaoyaoji.cn/form

![](https://user-gold-cdn.xitu.io/2018/9/27/1661a6cd60454273)

### 特性

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

### 文档

* [快速使用](https://www.yuque.com/zhulei-sbpfz/ua9nar/mdgwki)
* [组件](https://www.yuque.com/zhulei-sbpfz/ua9nar/vtebqs)

### 高级字段使用

* [自定义扩展](https://github.com/GavinZhuLei/vue-form-making/blob/master/doc/blank.md "自定义扩展")
* [图片上传](https://github.com/GavinZhuLei/vue-form-making/blob/master/doc/imgupload.md "图片上传")

### 社区资料笔记

* [Vue.Draggable](https://note.youdao.com/share/?id=f525c8897d9d7f6648bc28d59f5d03f4&type=note#/) （by @[jianhunxia](https://github.com/jianhunxia) 提供)

* [jsonEditor、ace和clipboard](https://note.youdao.com/share/?id=4cb3b53c76cb9f5f733f171529f71501&type=note#/) （by @[jianhunxia](https://github.com/jianhunxia) 提供)

### 支持

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

### 捐赠 

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

![](https://user-gold-cdn.xitu.io/2018/10/28/166ba780bb01fef7?w=2304&h=1050&f=jpeg&s=197327)

### 开源协议

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

### 商业许可

开源版本遵循 LGPL 条款发布，如果您不能接受 LGPL，并且需要将该项目用于商业用途且不想保留版权信息（底部“Powered by GavinZhuLei”版权及链接），为保障您的合法权益，需购买[商业授权](http://tools.xiaoyaoji.cn/form/#/price)