1. Project Overview

A form designer implemented using Vue and ant-design-vue, with Less as the styling language. Its main purpose is to generate configurable forms through simple operations, produce JSON data that can be saved, and restore forms from JSON, making form development simpler and faster.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Features

• Visual Configuration Interface
• Provides layouts such as grids and tables.
• Supports nested layouts.
• Supports custom form styles (inserted as inline styles).
• Provides operations such as preview, save, JSON generation, and executable code generation.
• Supports form validation.
• Quickly retrieve form data.
• Supports inserting custom components.
• Provides advanced controls.
• Supports custom theme colors.

Components

• KFormDesign Form Designer (Quickly design form pages through visual operations and generate configuration JSON or pages)
• KFormBuild Form Builder (Quickly builds form pages based on the configuration JSON obtained from the designer)

5. Tech Stack

k-form-design allows you to quickly build forms through drag-and-drop configuration.

Before getting started, we recommend learning Vue and ES2015 and correctly installing and configuring Node.js v8.9 or later. The official guide assumes that you have intermediate knowledge of HTML, CSS, and JavaScript, and are already proficient in the proper development practices for Vue.

The designer layout is based on the form-generator project. This form designer is implemented using Vue and ant-design-vue, with Less as the styling language. Its main purpose is to generate configurable forms through simple operations, produce JSON data that can be saved, and restore forms from JSON, making form development simpler and faster.

Installation

Installing the Form Designer

npm i k-form-design --save
 
# OR
yarn add k-form-design

Install the ant-design-vue UI library. For Vue 2, the latest recommended version is 1.7.8.

npm i ant-design-vue@1.7.8 --save

# OR
yarn add ant-design-vue@1.7.8

Import the Component

// Import in main.js

// Note: useComponents must be placed at the top to prioritize registration of lazy-loaded components
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)

Using the Component

<template>
  <div>
   <k-form-design />
  </div>
</template>