优秀的编程知识分享平台

网站首页 > 技术文章 正文

基于 Vue+Antd 拖放表单构建器KFormDesign

nanyue 2024-09-14 06:21:49 技术文章 5 ℃

前几天有给大家分享一个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>

属性参数

函数

事件

提供丰富的组件及自定义控件、富文本、树形选择器、级联选择器等功能。

ending 附上文档及项目地址链接。

# 文档地址
http://kcz66.gitee.io/k-form-design/

# 预览地址
http://cdn.kcz66.com/k-form-design.html

# 仓库地址
https://github.com/Kchengz/k-form-design

ok,就介绍到这里。如果大家有其它优秀的表单设计器,欢迎留言交流!

最近发表
标签列表