# element-form-design

**Repository Path**: shenxiaowei/element-form-design

## Basic Information

- **Project Name**: element-form-design
- **Description**: 基于Vue2.0+Element的可视化表单设计器，提供表单设计器和表单生成器两个组件，通过表单设计器快速设计出表单页面，使用表单生成器快速渲染出表单页面。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2022-05-12
- **Last Updated**: 2022-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 第一部分 简介

`element-form-design`是基于`Vue2.0`+`Element`的可视化表单设计器，提供表单设计器（`FormDesign`）和表单生成器（`FormBuild`）两个组件，通过表单设计器快速设计出表单页面，使用表单生成器快速渲染出表单页面。

![设计界面](img/design.png)

![preview](img/preview.png)

## 1.1 特性

- **可视化**：通过可视化操作，方便快捷的完成表单页面创建
- **Element**：基于 `Vue2.0` 的桌面端组件库`Element`，使用广泛，扩展方便
- **丰富的布局**：提供栅格、表格布局方式，满足各种布局需要
- **自定义**：提供了自定义的扩展，可以简单方便的将自己的组件放入表单中进行构建
- **易维护**：各表单组件渲染与配置独立，通过策略模式实现各组件松耦合

## 1.2 组件

- **`FormDesign` 表单设计器**：基于可视化操作快速设计出表单页面
- **`FormBuild` 表单构建器**：通过表单设计器生成配置快速构建出表单页面

# 第二部分 组件

## 2.1 `FormDesign`表单设计器

基于可视化操作快速设计出表单页面

```vue
<template>
  <element-form-design />
</template>
```

### 2.1.1 属性

|       参数        | 说明                   |  类型  | 默认值 |
| :---------------: | ---------------------- | :----: | :----: |
|  component-width  | 左侧组件面板宽度       | number |  260   |
|   config-width    | 右侧配置面板宽度       | number |  260   |
| min-design-width  | 设计面板最小宽度       | number |  300   |
|   header-height   | 顶栏高度               | number |   40   |
|  tool-bar-height  | 中间设计面板工具栏高度 | number |   40   |
|   footer-height   | 底栏高度               | number |   30   |
| custom-components | 自定义组件             | object |   —    |

### 2.1.2 插槽

|  name   | 说明                   |
| :-----: | ---------------------- |
| header  | 顶栏区域               |
| toolBar | 中间设计面板工具栏区域 |
| footer  | 底栏区域               |

### 2.1.3 方法

|     方法      | 说明                                              |          参数          |
| :-----------: | ------------------------------------------------- | :--------------------: |
|     clear     | 清空设计数据                                      |           —            |
|    setData    | 设置设计数据，如果不传递参数等价于调用`clear`方法 | Function(data: object) |
|    getData    | 获取设计数据                                      |           —            |
| extractModels | 提取表单默认数据                                  |           —            |

## 2.2 `FormBuild`表单构建器

通过表单设计器生成配置快速构建出表单页面

```vue
<template>
  <element-form-build :data="data" :models="models"/>
</template>
<script>
export default {
  components: {
    ElementFormBuild
  },
  data() {
    return {
      data: {},
      models: {}
    }
  }
}
</script>

```

### 2.2.1 属性

|       参数        | 说明         |  类型  | 默认值 |
| :---------------: | ------------ | :----: | :----: |
|       data        | 表单设计数据 | object |   —    |
|      models       | 表单数据     | object |   {}   |
| custom-components | 自定义组件   | object |   —    |

### 2.2.2 方法

|     方法      | 说明                                                         |                             参数                             |
| :-----------: | ------------------------------------------------------------ | :----------------------------------------------------------: |
|   validate    | 对整个表单进行校验的方法，参数为一个回调函数。<br />该回调函数会在校验结束后被调用，并传入两个参数：<br />是否校验成功和未通过校验的字段。<br />若不传入回调函数，则会返回一个 `promise` |        Function(callback: Function(boolean, object))         |
| validateField | 对部分表单字段进行校验的方法                                 | Function(props: array \| string, callback: Function(errorMessage: string)) |
|  resetFields  | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果   |                              —                               |
| clearValidate | 移除表单项的校验结果。<br />传入待移除的表单项的`prop`属性或者`prop`组成的数组，<br />如不传则移除整个表单的校验结果 |               Function(props: array \| string)               |
|  getRawModel  | 获得表单原始数据                                             |                              —                               |

# 第三部分 二次开发

`element-form-design`支持开发者扩展自己的组件或者替换现有组件，扩展有两种方式：组件扩展和源码扩展

## 3.1 组件扩展

组件扩展是指通过`custom-components`属性注入自定义组件信息。

### 3.2 源码扩展