1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/zyqwst-json-schema-editor-vue

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

json-schema-editor-vue

json-schema-editor-vue — это эффективный и простой в использовании редактор json-схем на основе Vue.

Если вы используете Vue3, пожалуйста, посмотрите json-schema-editor base on Vue3.

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

  • Поддержка пользовательских свойств для удовлетворения особых потребностей.
  • Пример: демо можно посмотреть по ссылке http://json-schema.sviip.com.
  • Также есть демо на внутреннем сервере: http://json-schema-editor.sviip.com.

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

# vue2
npm install json-schema-editor-vue
# vue3 
npm install json-scheme-editor-vue3
import JsonSchemaEditor from 'json-schema-editor-vue'
import 'json-schema-editor-vue/lib/json-schema-editor-vue.css'
Vue.use(JsonSchemaEditor)
<template>
  <div id="app">
    ...
    <json-schema-editor :value="tree"/>
    ...
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      tree:
      {
        root: {
          type: "object"
        }
      }
    }
  }
}
</script>

Дополнительная конфигурация

Чтобы добавить дополнительные свойства в json schema, можно использовать параметр extra. Поддерживаемые типы параметров: string, number, integer, object, array, boolean.

Пример:

<json-schema-editor
  :value="tree"
  disabledType
  lang="zh_CN"
  custom
  :extra="extraSetting"
/>

data() {
    return {
      extraSetting: {
        integer: { // действует на integer
          default: {
            name: "默认值",
            type: "integer",
          },
        },
        string: { // действует на string
          default: {
            name: "默认值",
            type: "integer", // default может принимать значения типа
          },
        },
      },
      tree: {
        root: {
          type: "object",
          title: "Условия",
          properties: {
            name: {
              type: "string",
              title: "Название",
              maxLength: 10,
              minLength: 2,
            },
            appId: {
              type: "integer",
              title: "ID приложения",
              default: 3,
            },
            credate: {
              type: "string",
              title: "Дата создания",
              format: "date",
            },
          },
          required: ["name", "appId", "credate"],
        },
      },
    };
  },
Свойство Описание Тип Обязательно По умолчанию
value Передаёт узел дерева по умолчанию, который будет использоваться для получения результата редактирования json schema Object Да
disabled Узел нельзя редактировать Boolean Нет false
disabledType Тип узла нельзя выбрать Boolean Нет false
root Является ли узел корневым Boolean Да true
custom Разрешает ли добавление пользовательских свойств Boolean Нет false
lang Локализация (можно выбрать zh_CN или en_US) String Нет zh_CN
extra Дополнительные настройки свойств Object Нет null

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Редактор json-схем, высокоэффективный и простой в использовании, основанный на Vue. Развернуть Свернуть
Apache-2.0
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/zyqwst-json-schema-editor-vue.git
git@api.gitlife.ru:oschina-mirror/zyqwst-json-schema-editor-vue.git
oschina-mirror
zyqwst-json-schema-editor-vue
zyqwst-json-schema-editor-vue
master