摘要:由于项目需要,需要一款基于vue平台的json schema编辑器,github上找了一圈没找到合适的组件,索性用两天时间自己造一个轮子吧。方便自己,方便生态圈。
源码地址:
Github:json-schema-editor-vue
Gitee : json-schema-editor-vue
####一、json-schema-editor-vue特征
1.按照json schema的规范用可视化的方式定义json结构
2.节点的属性可视化配置
针对字符串,并且可以按照日期、时间、链接、邮件、ip地址等规则做校验;
####二、使用方式
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