安裝
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的配置介紹。
運行結果
