摘要：由于项目需要，需要一款基于vue平台的json schema编辑器，github上找了一圈没找到合适的组件，索性用两天时间自己造一个轮子吧。方便自己，方便生态圈。
源码地址:
Github：json-schema-editor-vue
Gitee : json-schema-editor-vue
A json-schema editor of high efficient and easy-to-use, base on Vue
image.png
支持自定义属性，满足特殊的需求
开启自定义属性
Example
Demo http://json-schema.sviip.com
Usage
npm install json-schema-editor-vue
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-editor-vue属性说明如下：
| 属性 | 说明 | 类型 | 是否必须 | 默认值 |
|---|---|---|---|---|
| value | 传入一个默认的树节点，用来接收编辑后的json schema结果 | Object | 是 | |
| 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!
如果对您有帮助，别忘记给个星哦
