vue自定义组件触发表单校验（基于VueAntd）
vue自定义组件触发表单校验（基于VueAntd）生成JSON预览效果函数事件提供丰富的组件及自定义控件、富文本、树形选择器、级联选择器等功能。
前几天有给大家分享一个Vue可视化设计器。今天继续推荐一款超不错的Vue拖拽表单设计器K-Form-Design。
Vue可视化在线制作平台GodsPen
k-form-design 基于 vue.js ant-design 构建的表单设计器。在线快速生成配置表单。支持自定义属性配置、生成JSON及代码。
- 可视化配置页面
- 提供栅格、表格等布局
- 布局嵌套使用
- 提供预览、保存、生成json、生成可执行代码等操作
- 支持表单验证
- 快速获取表单数据
- 自定义组件插入
- 自定义主题色
- KFormDesign 表单设计器（基于可视化操作快速设计出表单页面，生成配置json或页面）
- KFormBuild 表单构建器（根据设计器中获取的配置json数据，快速构建出表单页面）
http://kcz66.gitee.io/k-form-design/#/zh-cn/components/design
http://kcz66.gitee.io/k-form-design/#/zh-cn/components/build安装
$ npm i k-form-design -S引入组件
// 在main.js引入
import KFormDesign from 'k-form-design'
import 'k-form-design/lib/k-form-design.css'
Vue.use(KFormDesign)使用
<template>
<div id="app">
<k-form-design
ref="kfd"
title="KFormDesign表单设计器"
:fields="['input' 'textarea']"
:toolbars="['save' 'preview' 'importJson']"
toolbarsTop
@save="handleSave"
/>
</div>
</template>
<script>
export default {
data () {
return {
jsonData: {...}
}
}
mounted() {
this.importData()
}
methods: {
// 导入json数据
importData() {
this.$refs.kfd.handleSetData(this.jsonData)
}
// 保存
handleSave(values) {
console.log(values)
}
}
}
</script>
属性参数
函数
事件
提供丰富的组件及自定义控件、富文本、树形选择器、级联选择器等功能。
预览效果
生成JSON
生成代码
ending 附上文档及项目地址链接。
# 文档地址
http://kcz66.gitee.io/k-form-design/
# 预览地址
http://cdn.kcz66.com/k-form-design.html
# 仓库地址
https://github.com/Kchengz/k-form-design
ok，就介绍到这里。如果大家有其它优秀的表单设计器，欢迎留言交流！
