基于vue平台的json schema 编辑器

摘要：由于项目需要，需要一款基于vue平台的json schema编辑器，github上找了一圈没找到合适的组件，索性用两天时间自己造一个轮子吧。方便自己，方便生态圈。

源码地址:

Github：json-schema-editor-vue
Gitee : json-schema-editor-vue
Example：国外Demo，国内请访问：国内Demo

一、json-schema-editor-vue特征

1.按照json schema的规范用可视化的方式定义json结构

image.png

2.节点的属性可视化配置
针对字符串，并且可以按照日期、时间、链接、邮件、ip地址等规则做校验；

image.png

二、使用方式

npm install json-schema-editor-vue --save

//main.js引入模块
import JsonSchemaEditor from 'json-schema-editor-vue'
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-editor-vue属性说明如下：

属性	说明	类型	是否必须	默认值
value	传入一个默认的树节点，用来接收编辑后的json schema结果	Object	是
disabled	节点名称不可编辑	Boolean		false
disabledType	节点类型不可选择	Boolean		false
root	是否是根节点	Boolean		true

将开源进行到底，源码地址再公布一次：

源码地址:

Github：json-schema-editor-vue
Gitee : json-schema-editor-vue
Example：国外Demo，国内请访问：国内Demo