# dg-form-making

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

Latest version **1.0.11** (published 2019-08-09) · LGPL license · 0 weekly downloads

## Install

```sh
npm install dg-form-making
pnpm add dg-form-making
yarn add dg-form-making
bun add dg-form-making
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2019-08-09 |
| First published | 2019-07-10 |
| Weekly downloads | 0 |
| License | LGPL |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 55.3 MB |
| Known vulnerabilities | 0 (+41 in 3 direct dependencies) |
| Install scripts | no |
| Author | zhoufei |
| Maintainers | zhoufei |
| Keywords | component, vue, form, element-ui, auto |

## Links

- npm: https://www.npmjs.com/package/dg-form-making
- Repository: https://gitee.com/zh8739/dg-form-making
- npm.io page: https://npm.io/package/dg-form-making

## Dependencies (13)

- [ace](https://npm.io/package/ace.md) ^1.3.0
- [vue](https://npm.io/package/vue.md) ^2.6.5
- [axios](https://npm.io/package/axios.md) ^0.18.0
- [qiniu](https://npm.io/package/qiniu.md) ^7.2.1
- [tinymce](https://npm.io/package/tinymce.md) ^4.8.4
- [qiniu-js](https://npm.io/package/qiniu-js.md) ^2.5.1
- [viewerjs](https://npm.io/package/viewerjs.md) ^1.2.0
- [clipboard](https://npm.io/package/clipboard.md) ^2.0.1
- [ace-builds](https://npm.io/package/ace-builds.md) ^1.4.3
- [element-ui](https://npm.io/package/element-ui.md) ^2.9.1
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.1
- [vuedraggable](https://npm.io/package/vuedraggable.md) ^2.16.0
- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.11 (latest) — 2019-08-09
- 1.0.10 — 2019-08-09
- 1.0.9 — 2019-08-07
- 1.0.8 — 2019-08-07
- 1.0.7 — 2019-07-17
- 1.0.6 — 2019-07-15
- 1.0.5 — 2019-07-15
- 1.0.4 — 2019-07-15
- 1.0.3 — 2019-07-12
- 1.0.2 — 2019-07-11
- 1.0.1 — 2019-07-11
- 1.0.0 — 2019-07-10

## 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)

---
_Source: https://npm.io/package/dg-form-making · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._