VueJS Generators
GitHubNPMJSFiddleCodePen
develop
develop
  • Getting Started
  • Installation
  • Usage
    • Styling
  • Component
    • Schema
    • Model
    • Options
    • Events
  • Fields
    • Field Properties
      • Inside Buttons
    • Core Fields
      • checkbox
      • checklist
      • input
      • label
      • radios
      • select
      • submit
      • textArea
    • Optional Fields
      • cleave
      • dateTimePicker
      • googleAddress
      • image
      • masked
      • noUiSlider
      • pikaday
      • selectEx
      • rangeSlider
      • spectrum
      • staticMap
      • switch
      • vueMultiSelect
    • Custom Fields
  • Groups
  • Validation
    • Built in Validators
    • Custom Validators
    • Handling Validation Events
Powered by GitBook
On this page

Was this helpful?

  1. Fields

Custom Fields

If you are not satisfied with the available field, you can create your own custom fields. There is only a few steps:

  1. These custom fields are like any custom components expect the need to use VueFormGenerator.abstractField as a mixins:

    <!-- fieldAwesome.vue -->
    <template>
        <input 
            class="form-control" 
            type="text" 
            v-model="value" 
            :disabled="disabled"
            :maxlength="schema.max"
            :placeholder="schema.placeholder"
            :readonly="schema.readonly" >
    </template>
    
    <script>
       import { abstractField } from "VueFormGenerator";
    
       export default {
             mixins: [ abstractField ]
       };
    </script>
  2. Register the new field as a global components. Registered name must validate this RegExp: (field)[A-Z][A-z]*.

     /* main.js */
     import Vue from "vue";
     import VueFormGenerator from "VueFormGenerator";
    
     // Register my awesome field
     import fieldAwesome from "./fieldAwesome.vue";
     Vue.component("fieldAwesome", fieldAwesome);
    
     Vue.use(VueFormGenerator);
  3. Last step is to use it in your schema

    var schema: {
       fields: [{
           type: "awesome",
           label: "Awesome (custom field)",
           model: "userName"
       }]
    };
  • vfg-field-myfield

  • vfg-field-calendar

  • vfg-field-awesome-dropdown

This way, it will be easier for everyone to find it. Thank you !

PreviousvueMultiSelectNextGroups

Last updated 6 years ago

Was this helpful?

If you decide to release your custom field into the wild, please so we can add you to a list on the README. Please try to use this naming convention for your custom field : vfg-field-* Exemple :

open a new issue