安装
npm install json-editor-vue3
main中引入
main.js 中加入下面代码
import "jsoneditor";
不然会有报错，如jsoneditor does not provide an export named ‘default’。 图片信息来源-github
代码示例
<template>
<json-editor-vue class="editor" v-model="jsonobj" @blur="remarkValidate" currentMode="text" :modeList="modeList"
:options="options" />
</template>
<script setup>
import JsonEditorVue from 'json-editor-vue3';
import { ref } from 'vue'
const jsonstr = ref("{ \"a\": 8, \"b\": \"2\", \"c\":8, \"d\":9, \"f\":99 }");
const jsonobj = ref(JSON.parse(jsonstr.value));
const options = ref({
search: false,
history: false,
})
const modeList= ref(["text", "view", "tree", "code", "form"]) // 可选模式
const remarkValidate = () => {
let newjsonstr = JSON.stringify(jsonobj.value);
console.log("remarkValidate", jsonobj.value, newjsonstr, jsonstr.value);
if (jsonstr.value == newjsonstr) {
console.log("no change")
} else {
jsonstr.value = newjsonstr
}
}
</script>
补充说明
json-editor-vue3支持多种配置，如可选模式（多选）modeList、初始模式currentMode，历史记录开关history，搜索功能开关search等， 上面示例代码已做部分配置实验，具体可以参考github的配置介绍。文章来源：https://www.toymoban.com/news/detail-655054.html
运行结果
文章来源地址https://www.toymoban.com/news/detail-655054.html
到了这里，关于Vue3 使用json编辑器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
