阅读量:0
json-editor-vue3 GitHub官网：GitHub - guyue88/json-editor-vue3
一. 介绍
基于 jsoneditor 开发的vue3 json editor，支持全屏编辑，有完善的事件回调，可以在失去焦点时，对编辑器内容做校验。
二. 安装
npm install json-editor-vue3三. 全局安装
import Vue from 'vue' import JsonEditorVue from 'json-editor-vue3' Vue.use(JsonEditorVue)四. 关于：vue3+ts无法渲染，报错 jsoneditor does not provide an export named 'default'
1. 安装插件 @originjs/vite-plugin-commonjs
npm install @originjs/vite-plugin-commonjs2. vite.config.js 内
// vite.config.js import { viteCommonjs } from '@originjs/vite-plugin-commonjs' export default defineConfig({ plugins: [vue(),viteCommonjs()], })五. 完整项目代码（将代码中接口相关代码替换成自己的！！！）
<script lang="ts" setup> import { ref, onMounted } from "vue"; import { message } from "ant-design-vue"; // 数据源 const data = ref(); // 是否存在错误 const errors = ref(0); // 错误行数 const line = ref(); // 获取 接口字段 const classify = ref("ABC"); // 修改接口 字段 const setJson = ref({ classify: "", jsonData: "", }); // 获取JSON const getJson = async () => { const res = await 获取JSON数据接口; data.value = res.data; }; getJson(); // 数据更新时触发 const updataModel = (val: any) => { data.value = val; }; // 数据错误时触发 const editError = (a: any, error: any) => { errors.value = error.length; if (error[0]) { line.value = error[0].line; } }; // 保存修改 const btn_save = async () => { if (errors.value == 0) { const toJson = JSON.stringify(data.value); setJson.value.classify = classify.value; setJson.value.jsonData = toJson; await 更改JSON数据接口; message.success("保存成功"); } else { message.error("保存失败，第 " + line.value + " 行存在格式错误"); } }; // 重置内容 const btn_reload = () => { getJson(); }; // CDE按钮 const get_Json = (type: any) => { if (type == "ABC") { classify.value = type; } if (type == "TASk") { classify.value = type; } if (type == "SYSTEM") { classify.value = type; } if (type == "REBAR") { classify.value = type; } if (type == "DICT") { classify.value = type; } getJson(); }; onMounted(() => { // 删除右上角logo和全屏按钮 const a = document.getElementsByClassName("jsoneditor-poweredBy"); const full = document.getElementsByClassName("full-screen"); const aArray = Array.from(a); const fullArray = Array.from(full); // 遍历数组并移除每个元素 aArray.forEach((element) => { if (element.parentNode) { element.parentNode.removeChild(element); } }); fullArray.forEach((element) => { if (element.parentNode) { element.parentNode.removeChild(element); } }); }); </script> <template> <div> <div class="btn_style"> <div class="btn_left"> <!-- 更换不同数据源(带有选中效果) --> <a-button :type="classify === 'ABC' ? 'primary' : 'dashed'" @click="get_Json('ABC')" >Abc</a-button > <a-button :type="classify === 'TASk' ? 'primary' : 'dashed'" @click="get_Json('TASk')" >Task</a-button > <a-button :type="classify === 'SYSTEM' ? 'primary' : 'dashed'" @click="get_Json('SYSTEM')" >System</a-button > <a-button :type="classify === 'REBAR' ? 'primary' : 'dashed'" @click="get_Json('REBAR')" >REBAR</a-button > <a-button :type="classify === 'DICT' ? 'primary' : 'dashed'" @click="get_Json('DICT')" >DICT</a-button > </div> <div class="btn_right"> <a-button danger ghost @click="btn_reload">复原</a-button> <a-button type="primary" ghost @click="btn_save">保存</a-button> </div> </div> <json-editor-vue @update:modelValue="updataModel" @validationError="editError" class="editor" v-model="data" style="height: 94vh; position: relative" /> </div> </template> <style scoped> .btn_save { position: absolute; top: 0; right: 0; } .btn_reload { position: absolute; top: 0; right: 60px; } .btn_style { display: flex; width: 100%; justify-content: space-between; padding: 10px 16px 16px; box-sizing: border-box; height: 50px; } .btn_left { width: 380px; display: flex; justify-content: space-between; } .btn_right { width: 140px; display: flex; justify-content: space-between; } </style> 注：本项目中，按钮样式、成功失败提示，使用 Ant-Design-Vue插件，按需安装插件。官方网址：Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
