FormMaking form designer configuration custom component Guide

introduce

Let's start with a brief introduction, FormMaking visual form designer Form designer based on Vue makes form development simple and efficient.

Official website address: http://form.making.link

Document address: http://docs.form.making.link

Many times, the built-in components of form designer cannot meet the needs of customers. At this time, you need to define some components to configure. Let's look at our approach:

Scope slot

At the beginning, we used the scope slot method in the designer to reserve a slot for the generator. When the generator is configured, we can introduce our own components and customize them. The specific methods are as follows:

  1. Drag user defined area to enter editing area.

  2. Select the type of field you want to put into the area.

  3. Click generate code to view it quickly and put it into your own components by coding.

In this way to add custom components, you need to write code in the generator to achieve, not very friendly. Next, I will introduce the better method.

Dynamic components

In the latest version, we introduce dynamic components. Configure the custom components in the designer to view the effect in the design.

Dynamic configuration of designer fields

In the latest version, we also provide dynamic configuration of designer fields, as shown below:

How to achieve this is described as follows:

  1. Simple implementation of a custom component
<template>
  <div class="custom-component">
    <span>
      //Width: < El input V-model=“ dataModel.width " style="width: 200px;"></el-input>
    </span>
    <span>
      //High: < El input V-model=“ dataModel.height " style="width: 200px;"></el-input>
    </span>
  </div>
</template>

<script>
export default {
  name: 'custom-width-height',
  props: {
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dataModel: this.value
    }
  },
  watch: {
    value (val) {
      this.dataModel = val
    },
    dataModel (val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style lang="scss">
.custom-component{
  background: #eee;
  padding: 10px;

  span{
    +span{
      margin-left: 10px;
    }
  }
}
</style>

Note that the custom component must be able to use v-model for two-way binding. If you don't know how to create it, you can read it first Vue.js file.

  1. Register components
Vue.use(FormMaking, {
  components: [{
    name: 'custom-width-height',
    component: CustomComponent // Custom components
  }]
})

It can also be used Vue.component Register components

  1. Designer configuration
<template>
  <fm-making-form
    :custom-fields="customFields"
  >
  </fm-making-form>
</template>

<script>
export default {
  data() {
    return {
      customFields: [
        {
          name: 'Custom components', // Field name
          el: 'custom-width-height', // Name of component registration
          options: {
            defaultValue: {}, // Default
            customClass: '', // custom style
            labelWidth: 100, // Label width
            isLabelWidth: false, // Display label or not
            hidden: false, // Hide properties
            dataBind: true, // Data binding properties
            required: false, // Required verification
            dataType: '', // Data type verification
            pattern: '', // Regular expression validation
          }
        }
      ]
    }
  }
}
</script>

Tags: Front-end Vue

Posted on Thu, 28 May 2020 10:18:53 -0400 by Mark1inLA