Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

org.webjars.npm:form-create__utils

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

org.webjars.npm:form-create__utils

WebJar for @form-create/utils

  • 2.5.7
  • Source
  • Maven
  • Socket score

Version published
Maintainers
1
Source

form-create

MIT github document

form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 3 UI frameworks, and supports the generation of any Vue components. Built-in 20 kinds of commonly used form components and custom components, no matter how complex forms can be easily handled.

Adapting to vue3 version

开源的vue可视化表单设计器组件 (功能演示)

中文 README

Support

  • iview
  • view-design
  • element-ui
  • ant-design-vue

If you have a form component suitable for form-create, please feel free to click here to leave a message

If it helps, you can click on "Star" in the upper right corner. Thank you! The project is still being developed and improved. If there are any 'recommendations or questions, please ask here

本项目QQ讨论群28963712

Update log

  • Preview

demo1

More
  • Form operations

description

demo2

  • group component

description

demo3

  • control configuration

description

demo2

Docs

简体中文 | English

Packages

NameDescription
@form-create/iview version npmiview version
@form-create/iview4 version npmview-design version
@form-create/element-ui version npmelement-ui version
@form-create/ant-design-vue version npmant-design-vue version
@form-create/designer version npmForm Designer

Example

Legend

https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

Install

Install the corresponding version according to the UI you use

iview

npm install @form-create/iview

view-design

npm install @form-create/iview4

element-ui

npm install @form-create/element-ui

ant-design-vue

npm install @form-create/ant-design-vue

Import

CDN:

iview

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<!-- import form-create/iview -->
<script src="//unpkg.com/@form-create/iview/dist/form-create.min.js"></script>

element-ui

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import element -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import form-create/element -->
<script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>

ant-design-vue

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link href="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.min.css" rel="stylesheet">
<!-- import moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/zh-cn.js"></script>
<!-- import ant-design-vue -->
<script defer src="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.js"></script>
<!-- import form-create -->
<script src="//unpkg.com/@form-create/ant-design-vue/dist/form-create.min.js"></script>

NodeJs:

iview

import formCreate from '@form-create/iview'
Vue.use(formCreate)

element-ui

import formCreate from '@form-create/element-ui'
Vue.use(formCreate)

ant-design-vue

import formCreate from '@form-create/ant-design-vue'
Vue.use(formCreate)

Usage

<form-create :rule="rule" v-model="fApi" :option="options" :value.sync="value"/>
export default {
    data(){
        return {
            fApi:{},
            value:{field1:'111',field2:'222',time:'11:11:11'},
            options:{
                onSubmit:(formData)=>{
                    alert(JSON.stringify(formData))
                }
            },
            rule:[
                {type:'input', field:'field1',title:'field1',value:'aaa'},
                {type:'input', field:'field2',title:'field2',value:'sss'},
                {type:'timePicker', field:'time',title:'time',value:'12:12:12'},
                {
                    type:'ElButton',
                    title:'Modify field1',
                    native: false,
                    on:{
                        click: ()=>{
                            this.rule[0].value+='a'
                        }
                    },
                    children: ['Click'],
                }
            ]
        }
    }
}

Demo

Download project

$ git clone https://github.com/xaboy/form-create.git
$ cd form-create

Install dependencies

$ npm run bootstrap

iview Demo

$ npm run dev:iview

view-design Demo

$ npm run dev:iview4

element-ui Demo

$ npm run dev:ele

ant-design-vue Demo

$ npm run dev:antd

Thank

时光弧线 | wxxtqk | williamBoss | HeyMrLin | djkloop | JetBrains

Donation

donation.jpg

Contact

email : xaboy2005@qq.com

License

MIT

Copyright (c) 2018-present xaboy

FAQs

Package last updated on 12 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc