k-form-design

基于vue Ant-Design 的表单设计器，快速开发

1,221

308

1,221

View on GitHub View on NPM

Top Related Projects

form-create

6,276

:fire::fire::fire: 强大的低代码动态表单组件，通过JSON数据驱动表单渲染，适配移动端，支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。

vue-form-making

5,525

A visual form designer/generator base on Vue.js, make form development simple and efficient.（基于Vue的可视化表单设计器，让表单开发简单而高效。）

Quick Overview

K-form-design is a Vue-based drag-and-drop form builder that allows users to create dynamic forms easily. It provides a visual interface for designing forms with various input types and supports form validation, custom components, and data persistence.

Pros

Intuitive drag-and-drop interface for rapid form creation
Supports a wide range of form components and input types
Customizable themes and styles to match application design
Includes form validation and data submission capabilities

Cons

Limited documentation, especially for advanced features
Primarily focused on Vue.js, which may limit its use in other frameworks
Some reported issues with responsiveness on mobile devices
Relatively small community compared to more established form builders

Code Examples

Basic form creation:

<template>
  <k-form-design ref="kfd" :value="formData" @submit="handleSubmit" />
</template>

<script>
export default {
  data() {
    return {
      formData: {}
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('Form submitted:', data)
    }
  }
}
</script>

Adding a custom component:

<template>
  <k-form-design ref="kfd">
    <template #customComponent>
      <k-form-item label="Custom Input" type="custom" name="customField">
        <a-input v-model="customValue" />
      </k-form-item>
    </template>
  </k-form-design>
</template>

<script>
export default {
  data() {
    return {
      customValue: ''
    }
  }
}
</script>

Accessing form data programmatically:

export default {
  methods: {
    getFormData() {
      const formData = this.$refs.kfd.getData()
      console.log('Current form data:', formData)
    }
  }
}

Getting Started

Install the package:
```
npm install k-form-design
```

Import and use in your Vue project:

import KFormDesign from 'k-form-design'
import 'k-form-design/lib/k-form-design.css'

Vue.use(KFormDesign)

Use the component in your template:

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

Competitor Comparisons

form-create

6,276

Pros of form-create

More comprehensive documentation and examples
Supports multiple UI frameworks (Element UI, iView, Ant Design Vue)
Offers a wider range of form components and customization options

Cons of form-create

Steeper learning curve due to more complex API
Larger bundle size, which may impact performance for simpler projects
Less focus on drag-and-drop functionality compared to k-form-design

Code Comparison

k-form-design:

<k-form-design
  :value="formData"
  @submit="handleSubmit"
/>

form-create:

<form-create
  v-model="fApi"
  :rule="formRule"
  :option="formOption"
  @submit="handleSubmit"
/>

Both libraries aim to simplify form creation in Vue applications, but they have different approaches. k-form-design focuses on a user-friendly drag-and-drop interface, making it easier for non-technical users to create forms. form-create, on the other hand, provides more flexibility and power through its extensive API and support for multiple UI frameworks.

The choice between the two depends on the project requirements, team expertise, and the desired balance between ease of use and customization capabilities.

form-generator

9,136

:sparkles:Element UI表单设计及代码生成器

Pros of form-generator

More comprehensive documentation and examples
Supports a wider range of form elements and customization options
Active community with frequent updates and contributions

Cons of form-generator

Steeper learning curve due to more complex features
Larger bundle size, which may impact performance in some applications
Less focus on mobile-friendly design out of the box

Code Comparison

k-form-design:

<k-form-design
  :value="formData"
  @submit="handleSubmit"
  ref="kfd"
/>

form-generator:

<fm-generate-form
  :data="formJson"
  :remote="remoteFuncs"
  :value="formData"
  ref="generateForm"
/>

Both libraries use a similar approach for rendering forms, but form-generator offers more advanced configuration options through its data and remote props. k-form-design focuses on simplicity and ease of use, while form-generator provides more flexibility for complex scenarios.

Overall, k-form-design is better suited for simpler projects or rapid prototyping, while form-generator excels in more complex, feature-rich applications that require extensive customization.

vue-form-making

5,525

A visual form designer/generator base on Vue.js, make form development simple and efficient.（基于Vue的可视化表单设计器，让表单开发简单而高效。）

Pros of vue-form-making

More comprehensive documentation and examples
Supports a wider range of form components
Includes a visual form designer interface

Cons of vue-form-making

Less frequent updates and maintenance
Larger bundle size due to additional features
Steeper learning curve for beginners

Code Comparison

k-form-design:

<k-form-design
  :value="formData"
  @submit="handleSubmit"
  ref="kfd"
/>

vue-form-making:

<fm-generate-form
  :data="formData"
  :remote="remoteFuncs"
  @on-submit="handleSubmit"
/>

Both libraries offer similar core functionality for form generation, but vue-form-making provides more advanced features and customization options. k-form-design focuses on simplicity and ease of use, making it a good choice for smaller projects or developers new to form generation tools. vue-form-making is better suited for complex forms and applications requiring extensive customization, but may require more time to master.

When choosing between the two, consider your project's requirements, team expertise, and desired level of control over form design and functionality.

variant-form

1,820

A powerful form designer for Vue.

Pros of variant-form

More extensive documentation and examples
Supports a wider range of form components and layouts
Active development with frequent updates

Cons of variant-form

Steeper learning curve due to more complex features
Larger bundle size, which may impact performance

Code Comparison

k-form-design:

<k-form-design
  :value="formData"
  @submit="handleSubmit"
>
  <!-- Form fields go here -->
</k-form-design>

variant-form:

<v-form-render
  :form-json="formJson"
  :form-data="formData"
  @form-submit="handleSubmit"
>
</v-form-render>

Both libraries offer Vue-based form builders, but variant-form provides a more feature-rich experience with advanced customization options. k-form-design, on the other hand, offers a simpler API and may be easier to integrate for basic form needs.

variant-form's extensive documentation and examples make it easier for developers to implement complex forms, while k-form-design's simplicity could be advantageous for smaller projects or teams with less experience in form building.

The code comparison shows that variant-form uses a JSON-based approach for form configuration, which allows for more flexibility but may require more setup. k-form-design's API is more straightforward, potentially leading to quicker implementation for simple forms.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

è¡¨åè®¾è®¡å¨ k-form-design

ç®ä»

ç¹æ§

å¯è§åéç½®é¡µé¢
æä¾æ æ ¼ãè¡¨æ ¼çå¸å±
å¸å±åµå¥ä½¿ç¨
æä¾é¢è§ãä¿åãçæjsonãçæå¯æ§è¡ä»£ç çæä½
æ¯æè¡¨åéªè¯
å¿«éè·åè¡¨åæ°æ®
èªå®ä¹ç»ä»¶æå¥
èªå®ä¹ä¸»é¢è²

ç»ä»¶

KFormDesign è¡¨åè®¾è®¡å¨ï¼åºäºå¯è§åæä½å¿«éè®¾è®¡åºè¡¨åé¡µé¢ï¼çæéç½®jsonæé¡µé¢ï¼
KFormBuild è¡¨åæå»ºå¨ï¼æ ¹æ®è®¾è®¡å¨ä¸è·åçéç½®jsonæ°æ®ï¼å¿«éæå»ºåºè¡¨åé¡µé¢ï¼

å®è£

å®è£è¡¨åè®¾è®¡å¨

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

å®è£ ant-design-vue UI ï¼æ¨è vue2 çæ¬ææ°ç 1.7.8çæ¬

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

# OR
yarn add ant-design-vue@1.7.8

å¼å¥ç»ä»¶

// å¨main.jså¼å¥

// æ³¨ï¼useComponents éæ¾æä¸é¢ï¼ä¼åæ³¨åæå è½½ç»ä»¶
import { useAntd } from 'k-form-design/packages/core/useComponents'
import KFormDesign from 'k-form-design/packages/use.js'
import 'k-form-design/lib/k-form-design.css'

useAntd(Vue)
Vue.use(KFormDesign)

ä½¿ç¨ç»ä»¶

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

äº¤æµ

ç¹å»é¾æ¥å å¥qqç¾¤è

License

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of form-create

Cons of form-create

Code Comparison

Pros of form-generator

Cons of form-generator

Code Comparison

Pros of vue-form-making

Cons of vue-form-making

Code Comparison

Pros of variant-form

Cons of variant-form

Code Comparison

Convert designs to code with AI

README

è¡¨åè®¾è®¡å¨ k-form-design

ç®ä»

ç¹æ§

ç»ä»¶

å®è£

å¼å ¥ç»ä»¶

ä½¿ç¨ç»ä»¶

äº¤æµ

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days

è¡¨åè®¾è®¡å¨ k-form-design

ç®ä»

ç¹æ§

ç»ä»¶

å®è£

å¼å¥ç»ä»¶

ä½¿ç¨ç»ä»¶

äº¤æµ