# kai-making

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

Latest version **1.0.9** (published 2019-04-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install kai-making
pnpm add kai-making
yarn add kai-making
bun add kai-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.9 |
| Published | 2019-04-13 |
| First published | 2019-04-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 97.8 MB |
| Known vulnerabilities | 0 (+41 in 3 direct dependencies) |
| Install scripts | no |
| Author | kai |
| Maintainers | quanqiushoujila |
| Keywords | component, vue, form, element-ui, auto |

## Links

- npm: https://www.npmjs.com/package/kai-making
- npm.io page: https://npm.io/package/kai-making

## Dependencies (14)

- [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.4.11
- [multiparty](https://npm.io/package/multiparty.md) ^4.2.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.9 (latest) — 2019-04-13
- 1.0.8 — 2019-04-13
- 1.0.7 — 2019-04-08
- 1.0.6 — 2019-04-08
- 1.0.5 — 2019-04-04
- 1.0.4 — 2019-04-04
- 1.0.3 — 2019-04-04
- 1.0.2 — 2019-04-04
- 1.0.1 — 2019-04-03
- 1.0.0 — 2019-04-03

## README

# kai-making

## Install

```shell
npm install kai-making -S
```

## Quick Start

``` javascript
import FormMaking from 'kai-making'
import 'kai-making/dist/KaiMaking.css'
Vue.use(FormMaking)

// or
import {
  GenerateForm
} from 'kai-making'
import 'kai-making/dist/KaiMaking.css'

Vue.component(GenerateForm.name, GenerateForm)
```

## Template
``` html
<fm-generate-form></fm-generate-form>
```

## 设计器引用

``` javascript
import {MakingForm} from 'kai-making'
Vue.component(MakingForm.name, MakingForm)
```

```html
<!-- 需要设置编辑区域高度 -->
<fm-making-form style="height: 500px;" preview generate-code generate-json>
    <template slot="action">
    </template>
  </fm-making-form>

<!-- 需要在设计器中预览代码需要引入ace.js库 -->
<script src="https://unpkg.com/form-making/public/lib/ace/src-min/ace.js"></script>
```

##### props
| Prop name  | Description  | Type  | Default value |
| ------------ | ------------ | ------------ | ------------ |
| preview  | 预览，头部操作按钮  | Boolean  | false |
| generate-json  | 生成JSON  | Boolean  | false |
| generate-code  | 生成代码  | Boolean  | false |


##### methods
| Function name | Description                    |
| ------------- | ------------------------------ |
| `getJSON`      | 获取设计器生成的JSON数据       |
| `getHtml`   | 获取生成可使用的html代码    |
| `setJSON(value)`   | 根据value值设置表单设计器    |

##### slots
| Slot name | Description                    |
| ------------- | ------------------------------ |
|   action    | 自定义设计器操作按钮，展示在设计头部区域       |


下面就是加载对应的数据用于展示，假设你已经正确加载组件

``` html
<fm-generate-form
    :data="jsonData"
    :remote="remoteFuncs"
    :value="values"
    ref="generateForm">
</fm-generate-form>
```

``` javascript
new Vue({
    ...
    data () {
        return {
            jsonData: {}, // 表单配置中生成的json数据
            values: {}, // 表单需要显示的表单数据
            remoteFuncs: {
                // 组件配置时配置的远端方法,保持和配置时输入的名称一致
                func_test (resolve) {
                  // 模拟接口请求
                  setTimeout(() => {
                    const options = [
                      {id: '1', name: '1111'},
                      {id: '2', name: '2222'},
                      {id: '3', name: '3333'}
                    ]
                    
                    // 获取到的值和标签可以通过配置页远端配置
                    // 值:id  标签：name
        
                    resolve(options) // 将后端获取的数据放入回调函数中
                  }, 2000)
                },
                func_test2....
            }
        }
    },
    methods: {
        ...{
            // 调用此方法验证表单数据和获取表单数据
            this.$refs.generateForm.getData().then(data => {
                // 数据校验成功
                // data 为获取的表单数据
            }).catch(e => {
                // 数据校验失败
            })
        }
    }
})
```

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