# dg-vue-form-builder

**Repository Path**: umberlla/dg-vue-form-builder

## Basic Information

- **Project Name**: dg-vue-form-builder
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-01-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dgForm
用于可视化的创建表单，插件依赖于Vue，elementUI, axios

## 安装
- 全局安装Vue/Cli3 `npm install -g @vue/cli`
- 安装依赖 `npm install`

## 运行
- 运行 `npm run build` ,会生成dist文件夹，打开dist目录中index.html即可查看效果

## 组件
dgForm共有两个组件，分别是dgFormBuilder、dgFormRender。dgFormBuilder用于可视化的添加表单，并导出表单配置选项，用于render表单。而dgFormRender根据选项参数动态生成表单。

### dgFormBuilder
添加表单，并生成render表单的选项参数

##### 属性
| 参数 | 说明 | 类型 | 是否必填| 默认值 |
|------|-----|------|--------|--------|
| form-builder-conf | 根据数据填充表单 | Object | 否 | 无 |

form-builder-conf 示例: 见下面form-render-conf 示例

##### 事件
| 方法名 | 说明  | 参数|
|-------|-------|-----|
| export |添加完表单后，导出数据 | 导出的选项参数，类型为object|

### dgFormRender
根据选项参数，动态生成表单

##### 属性
| 参数 | 说明 | 类型 | 是否必填| 默认值 |
|------|-----|------|--------|--------|
| show-button | 是否显示表单底部的提交、取消按钮 | Boolean | 否 | true |
| form-render-values | 表单字段的值 | Object | 否 | 无 |
| form-render-conf | 生成表单的选项参数 | Object | 是 | 无 |

form-render-conf 示例:
```
// 注意，formData中的对象的id必须唯一
{
  config:{
    width:70,            //  表单label宽度, 类型Number, 默认70
    position:'left',     //  表单label位置, 类型String, 可选参数 left/right/top, 默认left
    size:'mini'          //  表单尺寸大小, 类型String, 可选参数 medium/small/mini, 默认mini
  },
  formData:[
    {disabled:false, id:'0', label:"输入框", name:"input-0", placeholder:"请输入", regex:{rule: '/^[A-Za-z0-9]{3,5}$/', message: '输入3-5位的数字或字母'},required:false, type:"input"},
    {disabled:false, id:'1', label:"单选框", name:"radio-1", required:false, type:'radio', options:[{label:"选项1", value:"option1"},{label:"选项2",value:"option2"},{label:"选项3", value:"option3"}]},
    {disabled:false, id:"2", label:"下拉框", name:"select-2", required:false, type:"select", placeholder:"请选择", options:[{label:"选项1", value:"option1"},{label:"选项2",value:"option2"},{label:"选项3", value:"option3"}]},
    {disabled:false, id:'3', label:"多选框", name:"checkbox-3", required:false, type:"checkbox", options:[{label:"选项1", value:"option1"},{label:"选项2",value:"option2"},{label:"选项3", value:"option3"}]},
    {disabled:false, id:'4', label:"选择日期", name:"date-4", required:false, type:"date", placeholder:"请选择日期"},
    {disabled:false, id:'5', color:"#000", content:"这是一段文字", fontSize:14, textAlign:'left', fontWeight:'bold', type:"p"}
  ]
}
```

##### 事件
| 方法名 | 说明 | 参数 |
|-------|------|------|
| submit | 生成的表单底部“提交”按钮触发 | 整个表单的value值 |
| cancel-submit | 生成的表单底部“取消”按钮触发 | 无 |
| dg-form-change | 生成的表单中，单个表单value变化触发 | 两个:触发的表单值Object和整个表单的value值 |

## 使用
- 可以直接使用dist目录下的文件，查看演示效果