简介

快速编辑json数据，还需要支持全屏编辑，以及json校验。
https://github.com/guyue88/json-editor-vue3

安装依赖

npm install json-editor-vue3 --save

引入

在 main.js中添加

import “jsoneditor”;

全局引入

import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue3'
 
Vue.use(JsonEditorVue)

vue页面局部引入

import JsonEditorVue from 'json-editor-vue3'; 

示例

<script setup lang="tsx">
import { ref } from "vue";
import JsonEditorVue from "json-editor-vue3";

const valueData = ref<any>({"name":"zhangsan"});
</script>

<template>
   <JsonEditorVue v-model="valueData" style="height: 100vh" />
</template>

效果