当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2024-12-06 20:48 66 浏览

前几天有给大家分享一个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，就介绍到这里。如果大家有其它优秀的表单设计器，欢迎留言交流！

HTML 表单

上一篇：前端布局小案例，分享3个漂亮的表单组件
下一篇：一文看懂企业级低代码表单的设计

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

功能特性

组件

安装

引入组件

使用

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

在SpringBoot+Vue3项目中通过Nginx代理WebSocket实现跨域通信

利用webSocket实现消息的实时推送

谈谈websocket跨域

前端开发规范(一、HTML篇)

html5 工业web组态-开发自定义的组件 (炫酷按钮)

Python每日一库之Beautiful Soup（python mtime）