json-schema-editor-vue

A json-schema editor of high efficient and easy-to-use, base on Vue3

如果你使用Vue2,请查看原作者项目 json-schema-editor base on Vue2

支持自定义属性，满足特殊的需求

Example

Demo http://json-schema.sviip.com

国内Demo

Usage

1# vue3 
2npm install vue3-json-schema-editor-ts

1import JsonSchemaEditor from 'vue3-json-schema-editor-ts'
2import 'vue3-json-schema-editor-ts/dist/style.css'
3Vue.use(JsonSchemaEditor)

1<template>
2  <div id="app">
3    ...
4    <json-schema-editor :value="tree"/>
5    ...
6  </div>
7</template>
8
9<script>
10export default {
11  name: 'App',
12  data() {
13    return {
14      tree:
15      {
16        root: {
17          type: "object"
18        }
19      }
20    }
21  }
22}
23</script>

json-schema-editor-vue属性说明如下：

属性	说明	类型	是否必须	默认值
value	传入一个默认的树节点，用来接收编辑后的json schema结果	Object	是
hasAlias	title后增加别名列，用于function call或其他场景	Boolean		false
disabled	节点名称不可编辑	Boolean		false
disabledType	节点类型不可选择	Boolean		false
root	是否是根节点	Boolean		true
custom	是否允许添加自定义属性	Boolean		false
lang	国际化(可选zh_CN和en_US)	String		zh_CN

Don't forget to star if it helped! 如果对您有帮助，别忘记给个星哦

Links

• json-schema-editor-visual
• vue-json-schema-editor-visual