json-editor 官方例子： http://jeremydorn.com/json-editor/
github 地址: https://github.com/jdorn/json-editor
官方安装方式 npm install json-editor
版本 "json-editor": "^0.7.28"
在 vue 项目中使用了一个 @json-editor/json-editor 包和官方提供的效果类似，因为这个包使用时最近有更新
第一步安装
npm install @json-editor/json-editor --save
版本如下
"@json-editor/json-editor": "^1.1.0-beta.4"
第二步 .vue 文件中引入
import '@json-editor/json-editor'
第三步 在 <template> 中使用
<div id="editor_holder"></div>
第四步 mounted() 中赋值
let schema = {
"title": "Person",
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "First and Last name",
"minLength": 4,
"default": "Jeremy Dorn"
},
"age": {
"type": "integer",
"default": 25,
"minimum": 18,
"maximum": 99
},
"favorite_color": {
"type": "string",
"format": "color",
"title": "favorite color",
"default": "#ffa500"
}
}
}
let element = window.document.getElementById('editor_holder')
let config = { schema: {} }
config['schema'] = schema
console.log(config)
this.editor = new window.JSONEditor(element, config)
console.log(this.editor)
正确赋值后页面就可以显示 schema 配置了，但是，在 vue 项目中只能显示 HTML 标签默认样式 ╯︿╰
