vue-json-editor 简单实现

项目需求需要做个 json 编辑器,github json-editor star最高，地址如下 https://github.com/josdejong/jsoneditor ，这里面功能很多，项目需求就自己封装一个组件，方便你我他。

main.js 中引入 后 挂载到 prototype

import jsoneditor from 'jsoneditor'

Vue.prototype.$jsoneditor = jsoneditor

 

那么在组件中直接可以拿到 jsoneditor 对象  进行操作了 

<template>
  <div>
    <div id="jsoneditor" style="width: 400px; height: 200px;"></div>
  </div>
</template>
 
<script>
export default {
  name: "JsonEditor",
  /* eslint-disable vue/require-prop-types */
  props: {
    value: {
      type: Object
    }
  },
  data() {
    return {
      jsonEditor: null
    };
  },
  watch: {
    value(value) {
      const editorValue = this.jsonEditor.get();
      if (value !== editorValue) {
        this.jsonEditor.set(value);
      }
    }
  },
  mounted() {
    this.initJsonEditor();
  },
  methods: {
    // 初始化jsonEditor
    initJsonEditor() {
      var container = document.getElementById("jsoneditor");
      var options = {
        mode: "tree"
      };
      var editor = new this.$jsoneditor(container, options);
      this.jsonEditor = editor;
    },
    // 获取json
    getValue() {
      return this.jsonEditor.get();
    }
  }
};
</script>

接下来就是直接在组件中引入 

<JsonEditor :value="testdata"></JsonEditor>　

就能将组件的数据渲染到json editor 中