Second Development

Get the Source Code

git clone https://github.com/GavinZhuLei/vue-form-making.git

Install the Project Dependency Package

npm install

If the installation fails, you need to use the Taobao mirror address. The setting method is as follows:

npm config set registry https://registry.npmmirror.com

Run the Project

npm run serve

The project to run is to refer to the official website code of the FormMaking. The FormMaking source code is under src/components .

Packaging FormMaking

After modifying the source code, FormMaking can be repackaged with the following code, which is in the dist/ directory.

npm run build-bundle

---

Extending Form Properties

The following will describe how to extend custom components on the basis of the designer secondary development.

1. Add Configuration Parameters

src/components/Container.vue

<script>
  export default {
    // ...
   	data () {
      return {
        widgetForm: {
          list: [],
          config: {
            labelWidth: 100,
            labelPosition: 'top',
            size: 'small'
            // Extend the configuration information for the form here
          },
        },
      }
    }
  }
</script>

2. Extend the Designer Configuration

src/components/FormConfig.vue add configuration of forms, including props. The data is the widgetForm configuration information for the above config.

3. Add Rendering Information

After configuration is completed, then add rendering information in src/components/GenerateForm vue, add you own configuration to complete the expansion of the form properties.

Extend the Component

1. Add Custom Component Information

Add configuration information in the src/components/componentsConfig.js, currently include three objects basicComponents advanceComponents layoutComponents, Corresponding to the Basic Field, Advanced Field and Layout Field in the FormMaking, add the configuration information to the corresponding field as follows:

{
  type: 'input', // Component type, kept unique
  name: 'Text', //Component Display name
  icon: 'icon-input', //Components display icon, if you need to customize, please refer to how to customize icon
  options: { // Component configuration information, add the configuration according to the custom component itself
    defaultValue: '', // This value represents the default value of the component
  }
}

2. Import Component

Import the custom component in src/components/WidgetFormItem.vue, src/components/GenerateFormItem.vue respectively:

import CustomComponent from 'Your component location'
  
export default {
  components: {
    CustomComponent
  }
}

3. Add Component Configuration Information

Add configuration information in the src/components/WidgetConfig.vue according to your requirements , props.data structure is as the above configuration information, at this point, custom extensions component is successfully introduced to the designer.

Customize Icon For FormMaking

The project uses Ali Font icon library iconfont ↗, if you need to customize the icon configuration, please add the icon to your project, and then select Font class, Download the code locally to replace the files in the src/iconfont folder.