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

属性参数

函数

事件

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

预览效果