vue form json schema

Vue Form JSON -Schema

Mit einem JSON -Schema -basierten Formular Generator bringen Sie Ihre Komponenten mit!

Verwenden Sie ein beliebiges Vue -Komponenten oder ein HTML -Element!

Es gibt keine vorgefertigten Komponenten, die Sie mit Ihrem Formular zusammen mit dem Rätsel geben können. Stattdessen können Sie eine beliebige Komponente oder ein beliebiges Element verwenden, das ein Ereignis ausgibt, das benutzerdefinierte oder native ist.

Beachten Sie, dass im Wesentlichen alle VUE-Komponenten, die v-model verwenden, ein input (oder ein ähnliches) Ereignis emittiert. Weitere Informationen finden Sie unter Vue's Guide

Installation

Upgrade von V1? Schauen Sie sich die V2 -Versionshinweise an, um festzustellen, ob und wie sich die Migration auf Sie auswirkt.

Installieren Sie von NPM

npm install vue-form-json-schema

Importieren Sie in Ihre App

 import Vue from 'vue' ;
import VueFormJsonSchema from 'vue-form-json-schema' ;

Vue . component ( 'vue-form-json-schema' , VueFormJsonSchema ) ;

Beachten Sie, ob Sie nicht WebPack / Rollup verwenden und die ESM -Version verwenden möchten, die Sie für den Importieren von VueFormjson -Schema wie folgt verwenden möchten:

 import VueFormJsonSchema from 'vue-form-json-schema/dist/vue-form-json-schema.esm.js' ;

Schauen Sie sich die Demos an oder sehen Sie sich ein minimales Beispiel in den Verwendungsanweisungen an, um loszulegen.

Umd

Wenn Sie die UMD -Version verwenden, finden Sie weitere Beispiele im examples -Ordner des Github Repo und der UMD -Demo unten.

Wenn Sie vue-form-json-schema direkt in einem Browser verwenden möchten, können Sie dies mit der UMD-Version verwenden. Die UMD-Version wird automatisch die vue-form-json-schema Komponente, wenn Vue im Fenster gefunden wird. Das gesamte Modul ist auch unter window.VueFormJsonSchema verfügbar, auf dem die benannten Exporte wie zum Beispiel vfjsFieldMixin zugegriffen werden können.

Moderiert von Unkpg

<script src="https://unpkg.com/vue-form-json-schema@latest/dist/vue-form-json-schema.umd.js"></script>

Sie können vue-form-json-schema@latest einer festen Version wie [email protected] ersetzen

Installiert von NPM

<script src="../node_modules/dist/vue-form-json-schema.umd.js"></script>

Demo

Beachten Sie, dass alle Demos das Bootstrap -Styling verwenden, aber in diesem Paket kein Styling enthalten ist und es an Ihnen liegt, welche Stile verwendet werden sollten.

Minimale Demo

Die geringste Konfiguration, um ein input zu rendern.

Verschachtelte UI -Demo

Verwenden von Bootstrap -Klassen, um anzuzeigen, wie Layout für Geräte mit unterschiedlichen Bildschirmgrößen unterschiedlich sein kann. In diesem Beispiel werden zwei Eingangsfelder in ein DIV mit col-12 col-sm-6 Klassen gewickelt. Versuchen Sie, Ihr Browserfenster zu ändern, sehen Sie es auch in Aktion.

Bedingte Sichtbarkeit und Animation Demo

Manchmal sollte nur ein Feld angezeigt werden, wenn ein Zustand erfüllt ist. Verwendet <transition> , um Animation bereitzustellen.

Vue -Komponenten Demo

Sehen Sie, wie Sie Ihre eigenen oder Dritten-Vue-Komponenten in vue-form-json-schema verwenden.

VUE ASYNC -Beladung der Form

Laden des Formulars aus einem Backend? Schauen Sie sich dieses Beispiel an.

Anmeldeformular mit Validierung

Ein vollständigeres Beispiel mit Validierungs- und Fehlermeldungen

Anmeldeformular Beispiel mit verschachtelten Eigenschaften

Das obige Registrierungsformular oben, bei dem die Formularmodellschlüssel unter einem anderen Schlüssel verschachtelt sind

Umd Demos

Alle oben genannten Beispiele werden mit der UMD -Version im examples -Ordner dieses Repo repliziert.

Online -Version der ersten Demo

Merkmale

• Unterstützt jedes HTML -Element oder jede VUE -Komponente
• Klein ( 32K unkomprimiert, 6.5K gziped)
• Standardisiertes JSON -Schema für Annotation und Validierung (nach AJV)
• Das Layout ist unabhängig von der Datenstruktur

Dokumentation

Gitbook

Verwendung

Grundes Beispiel mit einem Feld

Für die Verwendung der UMD -Version examples

Siehe Demo

 < template >
    < vue-form-json-schema
      v-model = "model"
      : schema = "schema"
      : ui-schema = "uiSchema"
    >
  </ vue-form-json-schema >
</ template >

< script >
  export default {
    data ( ) {
      return {
        // An object which holds the form values
        model : { } ,
        // A valid JSON Schema object
        schema : {
          type : 'object' ,
          properties : {
            firstName : {
              type : 'string' ,
            } ,
          } ,
        } ,
        // Array of HTML elements or Vue components
        uiSchema : [ {
          component : 'input' ,
          model : 'firstName' ,
          // Same API as [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
          fieldOptions : {
            class : [ 'form-control' ] ,
            on : [ 'input' ] ,
            attrs : {
              placeholder : 'Please enter your first name' ,
            } ,
          } ,
        } ] ,
      } ;
    }
  } ;
< / script >

Abhängigkeiten

AJV

Zur Formularvalidierung mit JSON -Schema und interner Validierung

Lodash

get , set und merge im gesamten Paket. Die Bündelgröße ist jedoch sehr wichtig und wird immer in Betracht gezogen, und so streifen wir Lodash stark ab, um nur die absoluten Notwendigkeiten einzubeziehen

Vue

Getestet mit v2.5.9, wird aber wahrscheinlich auf jeder Version> = v2.4.0 funktionieren

Todo

• Tests schreiben
• Fügen Sie I18N -Unterstützung hinzu
  • In 1.15.2 mit options.ajv.locale hinzugefügt.ajv.locale Einstellung
• Schreiben Sie diese Readme
• Verwenden Sie AJV intern, um zu validieren:
  • vfs-global Prop ui-schema
  • vfs-component -Prop ui-schema
• Schreiben Sie Dokumente
• Veröffentlichen Sie mit Gitbook