# 表单设计器 k-form-design
<p align="center">
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/vueComponent/ant-design-vue">
<img src="https://img.shields.io/badge/Ant%20Design%20Vue-1.5.1-blue" alt="ant-design-vue">
</a>
<a href="https://github.com/Kchengz/k-form-design/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
</p>
### 简介
基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速
- [预览地址](http://cdn.kcz66.com/k-form-design.html)
- [开源地址](https://github.com/Kchengz/k-form-design)
### 特性
- 可视化配置页面
- 提供栅格、表格等布局
- 布局嵌套使用
- 表单自定义样式(以行内样式插入)
- 提供预览、保存、生成json、生成可执行代码等操作
- 支持表单验证
- 快速获取表单数据
- 自定义组件插入
- 提供高级控件
- 自定义主题色
### 版本
[](https://www.npmjs.com/package/k-form-design)
### 组件
- KFormDesign 表单设计器（基于可视化操作快速设计出表单页面，生成配置json或页面）
- KFormBuild 表单构建器（根据设计器中获取的配置json数据，快速构建出表单页面）
### 安装
> 安装表单设计器
```cmd
npm i k-form-design --save
# OR
yarn add k-form-design
```
> 安装 ant-design-vue UI ，推荐 vue2 版本最新的 1.7.8版本
```cmd
npm i ant-design-vue@1.7.8 --save
# OR
yarn add ant-design-vue@1.7.8
```
### 引入组件
``` javascript
// 在main.js引入
// 注：useComponents 需放最上面，优先注册懒加载组件
import 'k-form-design/packages/core/useComponents'
import KFormDesign from 'k-form-design/packages/use.js'
import 'k-form-design/lib/k-form-design.css'
Vue.use(KFormDesign)
```
### 使用组件
``` javascript
<template>
<div>
<k-form-design />
</div>
</template>
```
### 交流
点击链接加入qq群聊，可以直接提问及反馈bug
- [【k-form-desgin交流群：1020643215】](https://jq.qq.com/?_wv=1027&k=5BeoFAr)
- [【k-form-desgin交流二群：727396923】](https://jq.qq.com/?_wv=1027&k=uYyqQPlQ)
### 捐赠
如果你觉得k-form-design对你有帮助，欢迎给我捐赠
### License
[MIT](https://github.com/Kchengz/k-form-design/blob/master/LICENSE)
Copyright (c) 2019-present kchengz
基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言
版权申诉
185 浏览量
2023-08-26
10:22:00
上传
评论
收藏 1.38MB ZIP 举报
基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言 （149个子文件） 
demo.css 8KB iconfont.css 2KB .eslintignore 18B
2-1584793506316.gif 85KB 444.gif 84KB 2-1584791884885.gif 83KB 2-1584792430622.gif 65KB 2-1584791416791.gif 56KB 2-1584794814249.gif 40KB 2-1584792004589.gif 36KB 2-1584791563798.gif 36KB 2.gif 36KB 2-1584791471830.gif 36KB 1-1585492231794.gif 29KB .gitignore 218B
demo_index.html 40KB demo.html 4KB form-build2.html 3KB form-build1.html 2KB index.html 2KB index.html 636B favicon.ico 9KB favicon.ico 9KB
12312.jpg 47KB iconfont.js 30KB formItemsConfig.js 15KB useComponents.js 4KB mini.js 3KB NodeSchema.js 3KB Revoke.js 2KB preUseAntd.js 2KB preUseComponents.js 2KB main.js 2KB antdStyle.js 1KB index.js 1KB LazyLoadTick.js 1KB jsonFormat.js 819B PluginManager.js 772B use.js 674B vue.config.js 659B index.js 576B index.js 555B modal.js 265B babel.config.js 233B index.js 214B index.js 203B index.js 198B index.js 193B index.js 188B index.js 158B index.js 87B index.js 70B index.js 70B index.js 67B index.js 64B index.js 61B index.js 61B index.js 57B index.js 55B index.js 55B iconfont.json 7KB package.json 2KB form-design.less 21KB k-editor.less 3KB k-table.less 761B k-slider.less 140B k-form-design.less 136B LICENSE 1KB yarn.lock 377KB build.md 26KB design.md 8KB CHANGELOG.md 3KB form.md 3KB cascader.md 3KB README.md 3KB treeSelect.md 3KB start.md 2KB nodeSchema.md 2KB customize-theme.md 2KB custom.md 2KB soundCode.md 2KB config.md 2KB editor.md 932B _coverpage.md 908B README.md 881B _sidebar.md 789B vue-cli-ie.md 669B README.md 599B communication.md 242B donation.md 112B README.md 0B .nojekyll 0B .npmignore 290B
image-20200329202427369.png 61KB image-20200411184121347.png 61KB image-20200329173941524.png 61KB image-20200411183148543.png 60KB image-20200329174425298.png 56KB image-20200411183727771.png 39KB image-20200411183620984.png 35KB共 149 条
- 1
- 2
资源评论
