# iss-library-form-designer 可视化表单设计器

## 介绍

本项目使用 `vue-cli 4` 搭建，基于 `vue` 和 `element-ui` 实现。


### 可选参数

表单设计器（iss-library-form-designer）入参：

| 参数名                  | 参数类型    | 描述                                      |
|----------------------|---------|-----------------------------------------|
| preview              | Boolean | 是否为预览状态：true = 是；false（默认） = 否          |
| generateCode         | Boolean | 是否输出表单代码：true = 是；false（默认） = 否         |
| generateJson         | Boolean | 是否输出表单JSON结构数据：true = 是；false（默认） = 否   |
| importJson           | Boolean | 是否允许导入JSON格式表单代码：true = 是；false（默认） = 否 |
| clearable            | Boolean | 是否允许清空表单设计：true = 是（默认）；false = 否       |
| variables            | Object  | 引入变量：主要为当前登录用户信息                        |
| appId                | String  | 应用ID                                    |
| currentFormId        | String  | 表单ID                                    |
| currentFormVersionId | String  | 表单版本ID                                  |
| systemConfig         | Object  | 系统参数                                    |

### 使用示例:
#### 1.安装:
```
    $ npm install -s iss-library-form-designer@5.1.0-dev-14
```
#### 2.引入:

```
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import issLibraryFormDesigner from 'iss-library-form-designer';
import './assets/styles/theme/element-variables.scss';
import 'remixicon/fonts/remixicon.css';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
Vue.use(ElementUI, {zIndex: 2000});
issLibraryFormDesigner.install(Vue, {}, {});
Vue.config.productionTip = false;
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');
```
#### 3.使用:
```
<template>
  <iss-library-form-designer
      clearable
      generate-code
      generate-json
      preview
      import-json>
  </iss-library-form-designer>
</template>
```