Vue3 使用json编辑器

安装

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的配置介绍。

运行结果