vue form json schema

Vue form json схема

Генератор форм на основе схемы JSON, принесите свои компоненты!

Используйте любой компонент VUE или HTML -элемент!

Для вас нет предварительных компонентов, чтобы озадачить свою форму вместе. Вместо этого вы можете использовать любой компонент или элемент, который издает событие, пользовательское или собственное.

Обратите внимание, что по существу все компоненты VUE, которые используют v-model издает input (или аналогичное) событие. Смотрите руководство Vue для получения дополнительной информации

Установка

Обновление с V1? Проверьте заметки о выпуске V2, чтобы увидеть, влияет ли и как миграция.

Установите из NPM

npm install vue-form-json-schema

Импорт в ваше приложение

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

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

Примечание, если вы не используете WebPack / Rollup и хотите использовать версию ESM, необходимую для импорта Vueformjsonschema, как это:

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

Проверьте демонстрации или увидите минимальный пример в инструкциях по использованию, чтобы начать работу.

Герметичный

Если вы используете версию UMD, вы можете найти больше примеров в папке examples репозитория GitHub и демонстрации UMD ниже.

Если вы хотите использовать vue-form-json-schema непосредственно в браузере, вы можете сделать это, используя версию UMD. Версия UMD автоинсталлирует компонент vue-form-json-schema если Vue находится в окне. Весь модуль также доступен на window.VueFormJsonSchema , где можно получить доступ к именованным экспортам, таким как, например, vfjsFieldMixin .

Размещено UNKPG

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

Вы можете Pupite vue-form-json-schema@latest к фиксированной версии, такой как [email protected]

Установлен из NPM

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

Демо

Обратите внимание, что все демонстрации используют стиль начальной загрузки, но в этот пакет не включен стиль, и вам решать, какие стили следует использовать.

Минимальная демонстрация

Наименьшее количество конфигурации для отображения input элемента.

Вложенная демонстрация пользовательского интерфейса

Использование классов начальной загрузки, чтобы показать, как макет может отличаться для устройств с разными размерами экрана. В этом примере два поля ввода будут завернуты в Div с классами col-12 col-sm-6 . Попробуйте изменить размер окна вашего браузера тоже увидеть его в действии.

Условная видимость и демонстрация анимации

Иногда поле следует показывать только в случае выполнения условия. Использует <transition> для обеспечения анимации.

Vue Components Demo

Посмотрите, как использовать свои собственные или сторонние компоненты VUE в vue-form-json-schema .

Vue async загрузка формы

Загрузка формы из бэкэнда? Проверьте этот пример.

Регистрационная форма с проверкой

Более полный пример с помощью сообщений об проверке и ошибках

Пример регистрации с вложенными свойствами

Регистрационная форма выше, где ключи модели формы вложены под другим ключом

UMD Demos

Все приведенные выше примеры реплицируются с использованием версии UMD в папке examples этого репо.

Онлайн -версия первой демонстрации

Функции

• Поддерживает любой элемент HTML или компонент VUE
• Небольшой ( 32K Несомненно, 6.5K Гзипо)
• Стандартизированная схема JSON для аннотации и проверки (по AJV)
• Макет не зависит от структуры данных

Документация

Gitbook

Использование

Основной пример с одним полем

Для использования версии UMD, посмотрите папку examples , где все приведенные выше демонстрации реплицируются с помощью версии UMD

Смотрите демо

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

Зависимости

AJV

Для проверки формы с использованием схемы JSON и внутренней проверки

Лодаш

get , set и merge используются по всему упаковке. Размер пакета очень важен и всегда рассматривается, и поэтому мы сильно разбиваем Лодаш, чтобы включить только абсолютные предметы первой необходимости

Vue

Протестировано с V2.5.9, но, вероятно, будет работать над любой версией> = v2.4.0

Тодо

• Напишите тесты
• Добавьте поддержку I18N
  • Добавлено в 1.15.2 с options.ajv.locale .
• Напишите это Readme
• Используйте AJV внутренне для проверки:
  • vfs-global Prop ui-schema
  • vfs-component Prop ui-schema
• Написать документы
• Публикуйте с Gitbook