vue form json schema

Vue Form JSON Schema

¡Un generador de formulario basado en el esquema JSON, traiga sus componentes!

¡Use cualquier componente VUE o elemento HTML!

No hay componentes preBuidos para que se enojara su forma junto. En su lugar, puede usar cualquier componente o elemento que emita un evento, personalizado o nativo.

Tenga en cuenta que esencialmente todos los componentes VUE que usan v-model emite un evento input (o similar). Consulte la guía de Vue para obtener más información

Instalación

¿Actualización de V1? Consulte las notas de la versión V2 para ver si la migración lo afecta y cómo.

Instalar desde NPM

npm install vue-form-json-schema

Importar a su aplicación

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

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

Nota Si no está utilizando Webpack / Rollup y desea usar la versión ESM que necesita para importar VueFormjSonschema como esta:

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

Consulte las demostraciones o vea un ejemplo mínimo en las instrucciones de uso para comenzar.

Umd

Si está utilizando la versión UMD, puede encontrar más ejemplos en la carpeta examples del repositorio de GitHub y la demostración de UMD a continuación.

Si desea usar vue-form-json-schema directamente en un navegador, puede hacerlo usando la versión UMD. La versión UMD autoinstala el componente vue-form-json-schema si se encuentra Vue en la ventana. Todo el módulo también está disponible en window.VueFormJsonSchema , donde se puede acceder a las exportaciones nombradas, como por ejemplo, se puede acceder vfjsFieldMixin .

Organizado por UNKPG

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

Puede sustituir vue-form-json-schema@latest a una versión fija, como [email protected]

Instalado desde NPM

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

Manifestación

Tenga en cuenta que todas las demostraciones usan el estilo Bootstrap, pero no se incluye un estilo en este paquete y depende de usted qué estilos deben usarse.

Demostración mínima

La menor cantidad de configuración para representar un elemento input .

Demostración de UI anidada

Uso de clases de arranque para mostrar cómo el diseño puede ser diferente para dispositivos con diferentes tamaños de pantalla. En este ejemplo, dos campos de entrada se envolverán dentro de un DIV con clases col-12 col-sm-6 . Intente cambiar el tamaño de la ventana de su navegador también verlo en acción.

Visibilidad condicional y demostración de animación

A veces, solo se debe mostrar un campo si se cumple una condición. Utiliza <transition> para proporcionar animación.

Demostración de componentes vue

Consulte cómo usar sus propios componentes VUE o de terceros en vue-form-json-schema .

Vue async carga de forma

¿Cargando el formulario desde un backend? Mira este ejemplo.

Formulario de registro con validación

Un ejemplo más completo con mensajes de validación y error

Ejemplo de formulario de registro con propiedades anidadas

El formulario de registro anterior donde las claves del modelo de formulario están anidados bajo otra clave

Demostraciones umd

Todos los ejemplos anteriores se replican utilizando la versión UMD en la carpeta de examples de este repositorio.

Versión en línea de la primera demostración

Características

• Admite cualquier elemento HTML o componente VUE
• Pequeño ( 32K sin comprimir, 6.5K Gzipped)
• Esquema JSON estandarizado para la anotación y validación (por AJV)
• El diseño es independiente de la estructura de datos

Documentación

Bitón

Uso

Ejemplo básico con un campo

Para usar la versión UMD, consulte la carpeta de examples donde todas las demostraciones anteriores se replican usando la versión UMD

Ver demostración

 < 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 >

Dependencias

AJV

Para la validación de formulario utilizando el esquema JSON y la validación interna

Lodash

get , set y merge se usan en todo el paquete. Sin embargo, el tamaño del paquete es muy importante y siempre se considera, por lo que despojamos mucho de Lodash para incluir solo las necesidades absolutas

Vue

Probado con v2.5.9 pero probablemente funcionará en cualquier versión> = v2.4.0

HACER

• Escribir pruebas
• Agregar soporte i18n
  • Agregado en 1.15.2 con options.ajv.locale Configuración
• Escribe este readme
• Use AJV internamente para validar:
  • vfs-global Prop ui-schema
  • vfs-component Prop ui-schema
• Escribir documentos
• Publicar con Gitbook