Преобразование JSON в отображение

Библиотека Vue компонентов для отображения данных JSON в интерфейсе, созданная на основе версий динамических форм VJForm, динамических форм JFormer и конструктора VJDesign.

Дополнительная информация доступна в документации.

Основные характеристики

• Преобразование данных JSON в интерфейс
• Поддержка Vue 3
• Поддержка любых HTML компонентов и компонентов проекта Vue при использовании для отображения, а также поддержка всех свойств компонентов
• Возможность преобразования специальных объектов JSON в данные с взаимосвязями для реализации взаимодействия
• Возможность вторичной разработки способов парсинга свойств JSON, источников данных и логики отображения

Пример проекта

Установите зависимости этого проекта:

npm install

Запустите проект:

npm run dev

или

yarn install

yarn run dev

Быстрый старт

Установите пакет через npm:

npm i @json2render/vue-full

Создайте простой пример:

main.js

import { createApp } from 'vue'
import App from './App.vue'
import JRender from '@json2render/vue-full'

createApp(App).use(JRender).mount('#app')

App.vue

<template>
  <div>
    <v-jrender v-model="model" :fields="fields" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {},
      fields: [
        // поля формы
      ]
    }
  }
}
</script>
```<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return {
      model: { text1: 'Привет мир!!' },
      fields: [
        { component: 'p', text: '$:model.text1' },
        { component: 'input', value: 'model.text1' },
      ],
    }
  },
})
</script>

Примеры

Пример 1: Простой пример

Пример 2: Компонент Element

Дополнительная информация

Отображаемые компоненты

Общая форма определения:

<v-jrender
  v-model="model"
  :fields="fields"
  :datasource="datasource"
  :listeners="listeners"
  @setup="onsetup"
/>

• v-model: данные
• fields: коллекция компонентов
• datasource: пользовательская коллекция источников данных
• listeners: коллекция слушателей событий
• setup: событие setup

Определение компонента

Определение компонента включает три основных свойства: component, props и children.

• component: имя типа компонента, может быть любым HTML-тегом или компонентом, используемым в проекте
• props: свойства компонента, в Vue 3 можно определять свойства, HTML-атрибуты и события в одном объекте
• children: коллекция нижестоящих компонентов, вложенных в текущий компонент

Атрибуты компонентов

Атрибуты компонента преобразуются в прокси-объекты. Значения атрибутов компонента, соответствующие определённому выражению, будут преобразованы в реальные логические значения во время выполнения.

Хуки отрисовки

Перед тем как компонент будет отрисован, вызываются хуки отрисовки. Это позволяет менять атрибуты компонента до его отрисовки. Есть два момента времени для выполнения этих хуков:- prerender: Подобно этапу setup компонента, если определение компонента не изменяется, этот хук выполняется один раз.

• render: Выполняется перед каждым отрисованием компонента.

Данные источника

Источник данных — это источник данных, который может использоваться в выражениях атрибутов компонента. По умолчанию поддерживаются следующие источники данных: model, scope, arguments, refs.

• model: Данные, переданные через v-model.
• scope: Текущий член данных, переданный родителем при рендере текущего компонента, аналогично scoped-slot.
• arguments: Если текущее значение атрибута является функцией, то arguments представляет собой массив аргументов, переданных этой функции.
• refs: Если свойство ref установлено в props компонента, то можно получить экземпляр компонента через refs.

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

Расширенные возможности

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

Связанные ссылки

Документация находится в процессе доработки...

О проекте

• Можно ли использовать конфигурацию vjdesign дизайнера, основанного на Vue 2.0?Поскольку компоненты, основанные на Vue 2.0, без специальной адаптации обычно не могут использоваться в Vue 3.0, совместимость невозможна. Однако, если атрибуты компонентов библиотеки Vue 2.0 совпадают с атрибутами Vue 3.0, можно использовать пользовательские хуки отрисовки для преобразования атрибутов компонента в определения, совместимые с Vue 3.0, что позволит достичь совместимости.