Dynamic form generator based on element-ui 2.x

yz-dync-form Dynamic form designer component based on element-ui 2.x development, and form viewing component. Click to view

Rich features

1. Based on element-ui 2.x;

2. Contains rich form components;

3. Customize to add or delete form components;

4. You can customize the data source operations of some components

Included components

The form designer includes the following components:

• Input components: single-line text, multi-line text, password box, counter
• Selection components: drop-down single selection, drop-down multiple selection, single selection box group, multiple selection box group, time selection, time range, date selection, date range, switch
• Layout component: row container

Install

npm install element-ui -S
npm install vuedraggable -S
npm install yz-dync-form -S

Quick Start

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

import YzDyncForm from 'yz-dync-form'
import 'yz-dync-form/lib/styles/index.css'
// or 
import 'yz-dync-form/packages/styles/src/index.scss'

Vue.use(Element)
Vue.use(YzDyncForm)

// or
import {
  FormDesign,
  FormView,
  FormDialogView
  // ...
} from 'yz-dync-form'

Vue.use(FormDesign)
Vue.use(FormView)
Vue.use(FormDialogView)

Form designer

Rich components included

<template>
  <yz-form-design
    :height="domHeight"
    :clone="clone"
    :data="formData"
    :custom-button="customButton"
    @submit="onSubmit"/>
</template>

< script > 
export  default { 
data () { return {       domHeight : 600 , //The overall height of the form designer  

      formData : { 
        form : { 
          labelPosition :  ' right ' , 
          size :  ' small '
         }, // Form configuration properties
         rows : [{ 
          field : { 
            type :  ' text ' , 
            prop :  ' field0 ' , 
            label :  ' Single line text ' , 
            required :  true, 
            _config : { 
              type :  ' text ' , 
              clearable :  true , 
              placeholder :  ' please enter '
             } 
          } 
        }] // Component
       },

      // Custom button, Object is to pass a single button, Array is to pass multiple buttons
       customButton : [{
        name :  ' Close ' ,
        type :  ' danger ' ,
        index :  0 ,
 onClick () { console . Log ( ' --- ---close----- ' )        }      }      }]    }  },  methods : { clone ( form ) { // Form configuration custom format return form        

    }, 
onSubmit ( form ) { console . log (form) // form submit button click event     }   } } </ script >    

Form view

<template>
  <div>
    <!-- 普通表单查看 -->
    <yz-form-view :data="form" :rules="rules" />

    <!-- 自带Dialog表单查看 -->
    <yz-form-dialog-view :data="form" :rules="rules" v-bind="dialogProp">
      <template slot="title">
        <!-- dialog标题slot -->
      </template>

      < template  slot =" footer " > 
        <!-- bottom slot of dialog --> 
      </ template > 
    </ yz-form-dialog-view > 
  </ div > 
</ template > 
< script > 
export  default  { 
  data ( )  { 
    return  { 
      rules : { 
        //form verification rules 
      } , 
      form : { 
        rows : [ ] , 
        //... 
        //el-form configuration properties 
      } , 
      dialogProp: { 
        //Support all configuration properties of el-dialog 
      } 
    } 
  } 
} 
</ script >

Custom action

Custom implementation of component registration, data source registration of some components, custom rendering of components, etc.

import { configStore, config } from 'yz-dync-form/lib/core.js'

/** 
* Registered component category 
*/ 
const  groupIndex  =  0  //The parameter is optional, if defined, it means the sorting position of the new component category 
configStore . registerGroup ( { 
  name : 'group name' , 
  type : 'group Number (unique)' 
} ,  groupIndex )

/** 
* Registered component 
*/ 
const  groupType  =  ''  //Group number, optional values: input, select, layout, custom group number 
const  component  =  { 
  type : 'component unique identification' , 
  icon : ' Component icon class name' , 
  name : 'component name' , 
  tag : 'The tag of the rendering component, which can be a string type or a function. The function parameter is the default attribute of the component, for example: e-input' , 
  default ( )  {  //Component default properties 
    return  { } 
  } , 
  render ( h ,  field ,  model )  {
    // Component rendering function. Optional, if you don’t pass it, the default rendering function will be used, but if you don’t pass it, the tag parameter is required 
    // Example 
    return  h ( 'el-input' ,  { 
      attrs : field [ config . FieldConfigName ] , 
      model : model 
    } ) 
  } , 
  renderChildren ( h ,  field )  { 
    // Render child components. Optional, if there are sub-components under the component, it must be passed, such as el-option under el-select 
    // Example 
    return  ( < el-option / > ) 
  } 
} 
const  sortable  =  true //Whether to reorder, the default is true, set the sorting conditions, you can add a getOrder() method in the component, the smaller the return value, the better the sorting 
configStore . registerComponent ( groupType ,  component ,  sortable )

/ ** 
* registration component the render 
* / 
ConfigStore . RegisterRender ( 'unique identification component' ,  ( H ,  Field ,  Model )  =>  { 
  // Examples 
  return  H ( 'EL-INPUT' ,  { 
    attrs : Field [ config . FieldConfigName ] , 
    model : model 
  } ) 
} )

/ ** 
* registration component configuration page attribute 
* / 
Import  TextProp  from  'YZ-dync-form / Packages / Design / the src / The props / text' 
ConfigStore . RegisterPropertyComponent ( 'uniquely identify the component' ,  TextProp ) 

Custom data source

Some components, including sub-components, such as drop-down selection boxes, need to configure drop-down options. The component already contains the function of manually adding options. If you want to get data from the network interface as a drop-down option, you can use the following functions

import { configStore, DataSource } from 'yz-dync-form/lib/core.js'

// 例子
import Custom from 'yz-dync-form/packages/design/src/datasource/custom'

class  CustomDataSource  extends  DataSource  { 
  constructor ( )  { 
    super ( 'Data source unique identifier' ,  'Data source name' ) 
  }

  getPage ( )  { 
    //Data source configuration page 
    return  Custom 
  }

  getData ( config )  { 
    // config is the configuration item returned by the data source configuration page 
    // ps: The return result does not support asynchronous operation, and the result needs to be returned synchronously, and then update later 
    return  { 
      nameKey : 'label' ,  
      valueKey : 'value' , 
      datas : config  //Result 
    } 
  } 
}

const  index  =  - . 1  position // data source, a data register default source 
ConfigStore . registerDataSource ( new new  customDataSource ( ) ,  index )

Browser Support

Modern browsers and Internet Explorer 10+.

Changelog

Detailed changes for each release are documented in the release notes.

Download Details:

Author: xlkai

Live Demo: https://xlkai.github.io/yz-dync-form/

GitHub: https://github.com/xlkai/yz-dync-form

#vuejs #javascript #vue-js #vue