vue3 JSON editor 基于vanilla-jsoneditor

<template>
  <div ref="jsonEditor" style="width: 100%"></div>
</template>

<script setup lang="ts" name="JsonEditor">
import { ref, onMounted, watch } from "vue";
import { JSONEditor, Mode } from "vanilla-jsoneditor";
import type { MenuItem } from "vanilla-jsoneditor";

const props = defineProps({
  modelValue: {
    type: Object,
    default() {
      return {};
    }
  },
  initJson: {
    type: Object,
    default() {
      return {};
    }
  },
  readOnly: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["update:modelValue"]);
const jsonEditor = ref(null);
let jsonInstance: any;

watch(
  () => {
    return props.initJson;
  },
  () => {
    jsonInstance?.set({
      json: props.initJson
    });
  },
  {
    immediate: true
  }
);

onMounted(() => {
  init();
});

const init = () => {
  jsonInstance = new JSONEditor({
    target: jsonEditor.value as any,
    props: {
      content: {
        json: props.modelValue
      },
      readOnly: props.readOnly,
      mainMenuBar: true,
      statusBar: false,
      onRenderMenu: function (items: MenuItem[]) {
        return [items[0], items[3], items[4], items[5]];
      },
      mode: Mode["text"],
      onChange: (updatedContent: any, _previousContent: any, { contentErrors }) => {
        if (!contentErrors) {
          emit("update:modelValue", JSON.parse(updatedContent.text));
        }
      }
    }
  });
};
</script>