Vue 项目使用 json-editor (一)

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 标签默认样式   ╯︿╰