安裝
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，歷史記錄開關(guān)history，搜索功能開關(guān)search等， 上面示例代碼已做部分配置實驗，具體可以參考github的配置介紹。文章來源：http://www.zghlxwxcb.cn/news/detail-655054.html
運行結(jié)果
文章來源地址http://www.zghlxwxcb.cn/news/detail-655054.html
到了這里，關(guān)于Vue3 使用json編輯器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
