基于vue和ant-design-vue实现的表单设计器，使用了最新的前端技术栈，让表单开发更简单高效
- 可视化配置页面
- 提供栅格、表格等布局
- 表单边距、布局等属性设置
- 提供预览、保存、生成json、生成可执行代码等操作
- 支持表单验证
- 快速获取表单数据
- 提供高级组件
- KFormDesign 表单设计器（基于可视化操作快速设计出表单页面，生成配置json或页面）
- KFormBuild 表单构建器（根据设计器中获取的配置json数据，快速构建出表单页面）
# 使用yarn
yarn add k-form-design
# 使用npm
npm i k-form-design --save
// 在main.js引入
import { KFormDesign, KFormBuild } from "k-form-design";
import "k-form-design/lib/k-form-design.css";
Vue.use(KFormDesign);
Vue.use(KFormBuild);建议将表单设计器组件放到全屏组件或页面使用，如果是ant-design的Modal或者Drawer组件，使用className给容器添加类名，并设置width:100vw;height:100vh;
表单设计器save事件，点击保存时触发
<template>
<div>
<k-form-design @save="handleSave" />
</div>
</template>
<script>
export default {
methods: {
handleSave(values) {
this.$message.success("触发保存方法");
console.log(values);
}
}
};
</script>使用表格布局时，在设计界面右键可以添加行列和合并单元格
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 表单设计器标题 | string | "表单设计器 --by kcz" |
| showClose | 是否显示关闭按钮 | boolean | false |
| 事件名称 | 说明 | 回调参数 | |
|---|---|---|---|
| save | 点击保存按钮时回调 | object | |
| close | 点击关闭按钮时回调 | void | |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 表单设计器生成的json数据 | object | - |
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| submit | 提交时回调 | Promise对象 |
说明：submit事件可以通过表单设计器的提交按钮触发，也可以给组件绑定ref，通过函数触发，代码如下：
// jsonData 设计器生成的json数据
<k-form-build
:value="jsonData"
ref="KFormBuild"
@submit="handleSubmit"
/>
// 触发submit事件
this.$refs.KFormBuild.handleSubmit()
// 获取表单数据
handleSubmit (getData){
getData.then(values=>{
// 表单验证通过，并拿到values值
console.log(value)
}).catch(err=>{
// 表单验证未通过
console.log(err)
})
}MIT Copyright (c) 2019-present kchengz
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent