form-create is a form generation component that can generate dynamic rendering, data collection, validation, and submission through JSON. Supports three UI frameworks and any Vue component generation. Built-in 20 common form components and custom components, even more complex forms can be easily completed.
Supporting UI
- element-ui
- iview/view-design
- ant-design-vue
New features
Version 2.5 mainly updates the following functions:
- Refactoring internal core code
- Optimize internal rendering mechanism
- Optimize internal life cycle events
- Refactoring TypeScript
- New nextTick method to set callback after rendering
- New Paging Loading Component to Accelerate First Screen Rendering
- Add custom configuration item effect
- Add Support to Modify type
- Added control to support configuration rule insertion location
- Optimizing control s will take effect if they meet the criteria. Previous versions will only take effect for the first
- New support for configuring prefix prefix, suffix for components
- New update configuration, triggered after value sends changes
- Add a new wrap configuration item to configure FormItem
- New object Component
- New support for custom title,info component
- New Rich Text Component wangEditor
- New Native Event Support Event Injection
- Support value.sync Gets Bidirectional Binding formData
- Optimize the default form submission button
install
Install the appropriate version based on the UI you use
element-ui version
npm i @form-create/element-ui
iview@2.x Version |3.x
npm i @form-create/iview
iview/view-design@4.x Edition
npm i @form-create/iview4
ant-design-vue@1.5+ Edition
npm i @form-create/ant-design-vue
Get started quickly
This paper takes element-ui as an example
- In main. Write the following in js:
import Vue from 'vue' import ELEMENT from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import formCreate from '@form-create/element-ui' Vue.use(ELEMENT) Vue.use(formCreate)
- Generate Form
<template> <div id="app1"> <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create> </div> </template>
export default { data() { return { //Instance object fApi: {}, //Form Data value: {}, //Form Generation Rules rule: [ { type: 'input', field: 'goods_name', title: 'Commodity Name' }, { type: 'datePicker', field: 'created_at', title: 'Creation Time' } ], //Component parameter configuration option: { //Form Submission Events onSubmit: function (formData) { alert(JSON.stringify(formData)) } } } } }
Rule introduction
type
- Type: String
- Description: Set the name of the build component
field
- Type: String
- Description: Set the field name of the form component so that the custom component can not be configured
title
- Type: String|Object
- Description: Name of component
value
- Type: any
- Description: Form component field values, custom components can be set without
props
- Parameter: Object
- Description: Set props for components
info
- Type: String|Object
- Description: Set prompts for components
hidden
- Type: Bool
- Description: Set whether the component renders
prefix
- Type: string|Object
- Description: Set the prefix of the component
suffix
- Type: string|Object
- Description: Set the suffix of a component
validate
- Type: Array
- Description: Set validation rules for form components
options
- Type: Array
- Description: Set radio,select,checkbox and other component option s
col
- Type: Object
- Description: Set layout rules for components
control
- Type: Object
- Description: Control the display of other components
children
-
Type: Array<rule|string|maker>
-
Description: Set the slot of the parent component, default by default. Can be used with slot configuration items
- Example 1
formCreate.maker.create('button').children([ 'Button Content' ])
- Example 2
maker.input('text','text','text').children([ maker.create('span').children(['append']).slot('append') ])
- Example 3
formCreate.maker.create('i-row').children([ formCreate.maker.create('i-col').props('span',12).children([ formCreate.maker.template('<span>Custom Components</span>',new Vue) ]), ])
Functional introduction
1. Custom Components
form-create supports generating any vue component within a form
For example, generate an el-button component:
{ //A type can be a built-in component name, a vue component name, or an html tag type: 'el-button', //... children: ['Button Content'] }
Generate an html tag
{ //A type can be a built-in component name, a vue component name, or an html tag type: 'span', //... children: ['span content'] }
Be careful! Generated components must be mounted globally or through form-create
Mount via Vue
Vue.component(component.name, component);
Mount through form-create
formCreate.component(component.name, component);
2. Custom Layout
Layout components by setting the configuration item col or raster component
Set the component layout by configuring the item col to display two components in one row
[ { type:'input', field:'input1', title:'input1', col:{span:12} },{ type:'input', field:'input2', title:'input2', col:{span:12} }, ]
Setting up a row to display three components through a raster component
{ type:'el-row', children: [ { type:'el-col', props:{ span:8 }, children: [{type:'input',field:'input1',title:'input1'}] }, { type:'el-col', props:{ span:8 }, children: [{type:'input',field:'input1',title:'input1'}] }, { type:'el-col', props:{ span:8 }, children: [{type:'input',field:'input1',title:'input1'}] } ] }
3. Component prefix and suffix
Configure the component's prefix by generating the prefix property of the rule, and the suffix property by configuring the component's suffix
{ type:'input', field:'text', title:'text', prefix:'prefix', suffix:'suffix', }
Set prefix and suffix to custom components
{ type:'input', field:'text', title:'text', value:'default', prefix:{ type:'ElButton', children:['prefix'] }, suffix:{ type:'ElButton', children:['suffix'] }, }
4. Component Linkage
Controlling the display of other components through their values is possible through the control configuration item
For example, enter the reason for the poor rating when the rating is less than 3 stars
{ type:'rate', field: 'star', title:'score', value:5, control:[ { handle(val){ return val < 3 }, rule:[ { type:'input', field:'info', title:'Reason for poor assessment', value:'default info', } ] } ] }
parameter | Explain | type |
---|---|---|
value | Display the components in rule when their values and values are equal | string|Number|Bool |
handle | Show the components in rule when the handle method returns true | Function |
rule | This component controls the components displayed | Array |
append | Set the location of rule append in rule | string |
prepend | Set the position of rule preceding insert in rule | string |
child | Sets whether rule is inserted into the child ren of the specified location, and is added to the child ren of the current rule by default | Boolean |
Be careful! handle priority is greater than value, all eligible control s will take effect
5. Form validation
validate configuration items allow you to set validation rules for components, and custom form components also support validation
For example, setting the input component required
{ type:'input', //... validate:[{required:true, type:'string', message:'Please enter something'}] }
parameter | Explain | type | Default value |
---|---|---|---|
enum | Enumeration Type | string | - |
len | Field Length | number | - |
max | Maximum length | number | - |
message | Verify Copy | string | - |
min | Minimum length | number | - |
pattern | Regular Expression Check | RegExp | - |
required | Is Required | boolean | false |
transform | Convert field values before checking | function(value) => transformedValue:any | - |
type | Built-in check type, Optional | string | 'string' |
validator | Custom Check | function(rule, value, callback) | - |
whitespace | Whether spaces are treated as errors when required | boolean | false |
Be careful! Type needs to be defined based on the value type of the component
Introduction to APi
The following are common methods
A complete introduction to Api
Set Form Values
Override, undefined fields are set to null
type coverValue = (formData:{[field:string]:any}) => void
- Usage:
fApi.coverValue({goods_name:'HuaWei'})
Merge method, undefined fields are not modified
interface setValue { (formData:{[field:string]:any}): void (field:string, value:any): void }
- Usage:
fApi.setValue({goods_name:'HuaWei'})
Alias method changeValue, changeField
Hide Fields
interface hidden { //Hide all components (status:Boolean):void //Hide specified components (status:Boolean, field:string):void //Hide some components (status:Boolean, field:string[]):void }
- Usage:
fApi.hidden(true, 'goods_name')
Get Component Hidden State
type hiddenStatus = (field:string)=>Boolean
- Usage:
const status = fApi.hiddenStatus('goods_name')
Get Rules
interface getRule { (field:string):Rule (field:string, origin: true): FormRule }
- Usage:
const rule = fApi.getRule('goods_name')
Insert Rule
Pre-insert
interface prepend { //Insert to First (rule:FormRule):void //Insert before specified field (rule:FormRule, field:string):void //Insert into the specified field children (rule:FormRule, field:string, child:true):void }
- Usage:
fApi.prepend({ type:"input", title:"Introduction to Commodities", field:"goods_info", value:"", props: { "type": "text", "placeholder": "Please enter the product description", }, validate:[ { required: true, message: 'Please enter the product description', trigger: 'blur' }, ], }, 'goods-name')
Post-append
interface append { //Insert last (rule:FormRule):void //Insert after specified field (rule:FormRule, field:string):void //Insert into the specified field children (rule:FormRule, field:string, child:true):void }
- Usage:
fApi.append({ type:"input", title:"Introduction to Commodities", field:"goods_info", value:"", props: { "type": "text", "placeholder": "Please enter the product description", }, validate:[ { required: true, message: 'Please enter the product description', trigger: 'blur' }, ], }, 'goods-name')
Delete the specified rule
type removeRule = (rule:FormRule) => FormRule
- Usage:
const rule = {type:'input', /** ... **/} fApi.removeRule(rule)
validate form
type validate = (callback:(...args:any[]) => void)=> void
- Usage:
fApi.validate((valid, fail) => { if(valid){ //todo form validation passed }else{ //todo form validation failed } })
Verify the specified field
type validateField = (field, callback:(...args:any[]) => void)=> void
- Usage:
fApi.validateField('goods_name', (valid, fail) => { if(valid){ //todo field validation passed }else{ //todo field validation failed } })
Get Form Data
interface formData { //Get all the data (): {[field:string]:any } //Get data for some fields (field:string[]): {[field:string]:any } }
- Usage:
const formData = fApi.formData()
Modify Submit Button
type submitBtnProps = (props:Object) => void
- Usage:
fApi.submitBtnProps({disabled:true})
-
Shortcut operations:
- FApi. Btn. Load (true) Set the submit button to load state
- fApi.btn.disabled(true) sets the submit button disabled state
- fApi.btn.show(true) Set the submit button display status
Modify Reset Button
type resetBtnProps = ( props:Object) => void
- Usage:
fApi.resetBtnProps({disabled:true})
-
Shortcut operations:
- FApi. ResetBtn. Load (true) Set the reset button to enter the loading state
- fApi.resetBtn.disabled(true) set reset button disable state
- fApi.resetBtn.show(true) Set the reset button display status
Hide Form
type hideForm = (hide:Boolean)=>void
- Usage:
fApi.hideForm(true)
Submit Form
type submit = (success: (formData: FormData, $f: fApi) => void, fail: ($f: fApi) => void)=> void
- Usage:
fApi.submit((formData, fapi) => { //todo submit form },()=>{ //todo form validation failed })
If it helps you, you can GitHub Thank you for your support!