vue3+json-editor-vue3实现JSON编辑器

json-editor-vue3 GitHub官网：GitHub - guyue88/json-editor-vue3
一. 介绍

基于 jsoneditor 开发的vue3 json editor，支持全屏编辑，有完善的变乱回调，可以在失去焦点时，对编辑器内容做校验。

二. 安装

1. npm install json-editor-vue3

复制代码

三. 全局安装

1. import Vue from 'vue'
2. import JsonEditorVue from 'json-editor-vue3'
4. Vue.use(JsonEditorVue)

复制代码

四. 关于：vue3+ts无法渲染，报错 jsoneditor does not provide an export named 'default'

1. 安装插件 @originjs/vite-plugin-commonjs

1. npm install @originjs/vite-plugin-commonjs

复制代码

2. vite.config.js 内

1. // vite.config.js
2. import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
3. export default defineConfig({
4.   plugins: [vue(),viteCommonjs()],
5. })

复制代码

五. 完备项目代码（将代码中接口相关代码更换成自己的！！！）

1. <script lang="ts" setup>
2. import { ref, onMounted } from "vue";
3. import { message } from "ant-design-vue";
5. // 数据源
6. const data = ref();
7. // 是否存在错误
8. const errors = ref(0);
9. // 错误行数
10. const line = ref();
11. // 获取 接口字段
12. const classify = ref("ABC");
13. // 修改接口 字段
14. const setJson = ref({
15.   classify: "",
16.   jsonData: "",
17. });
18. // 获取JSON
19. const getJson = async () => {
20.   const res = await 获取JSON数据接口;
21.   data.value = res.data;
22. };
23. getJson();
24. // 数据更新时触发
25. const updataModel = (val: any) => {
26.   data.value = val;
27. };
28. // 数据错误时触发
29. const editError = (a: any, error: any) => {
30.   errors.value = error.length;
31.   if (error[0]) {
32.     line.value = error[0].line;
33.   }
34. };
35. // 保存修改
36. const btn_save = async () => {
37.   if (errors.value == 0) {
38.     const toJson = JSON.stringify(data.value);
39.     setJson.value.classify = classify.value;
40.     setJson.value.jsonData = toJson;
41.     await 更改JSON数据接口;
42.     message.success("保存成功");
43.   } else {
44.     message.error("保存失败，第 " + line.value + " 行存在格式错误");
45.   }
46. };
47. // 重置内容
48. const btn_reload = () => {
49.   getJson();
50. };
51. // CDE按钮
52. const get_Json = (type: any) => {
53.   if (type == "ABC") {
54.     classify.value = type;
55.   }
56.   if (type == "TASk") {
57.     classify.value = type;
58.   }
59.   if (type == "SYSTEM") {
60.     classify.value = type;
61.   }
62.   if (type == "REBAR") {
63.     classify.value = type;
64.   }
65.   if (type == "DICT") {
66.     classify.value = type;
67.   }
68.   getJson();
69. };
70. onMounted(() => {
71.   // 删除右上角logo和全屏按钮
72.   const a = document.getElementsByClassName("jsoneditor-poweredBy");
73.   const full = document.getElementsByClassName("full-screen");
74.   const aArray = Array.from(a);
75.   const fullArray = Array.from(full);
76.   // 遍历数组并移除每个元素
77.   aArray.forEach((element) => {
78.     if (element.parentNode) {
79.       element.parentNode.removeChild(element);
80.     }
81.   });
82.   fullArray.forEach((element) => {
83.     if (element.parentNode) {
84.       element.parentNode.removeChild(element);
85.     }
86.   });
87. });
88. </script>
89. <template>
90.   <div>
91.     <div class="btn_style">
92.       <div class="btn_left">
93.         <!-- 更换不同数据源(带有选中效果) -->
94.         <a-button
95.           :type="classify === 'ABC' ? 'primary' : 'dashed'"
96.           @click="get_Json('ABC')"
97.           >Abc</a-button
98.         >
99.         <a-button
100.           :type="classify === 'TASk' ? 'primary' : 'dashed'"
101.           @click="get_Json('TASk')"
102.           >Task</a-button
103.         >
104.         <a-button
105.           :type="classify === 'SYSTEM' ? 'primary' : 'dashed'"
106.           @click="get_Json('SYSTEM')"
107.           >System</a-button
108.         >
109.         <a-button
110.           :type="classify === 'REBAR' ? 'primary' : 'dashed'"
111.           @click="get_Json('REBAR')"
112.           >REBAR</a-button
113.         >
114.         <a-button
115.           :type="classify === 'DICT' ? 'primary' : 'dashed'"
116.           @click="get_Json('DICT')"
117.           >DICT</a-button
118.         >
119.       </div>
120.       <div class="btn_right">
121.         <a-button danger ghost @click="btn_reload">复原</a-button>
122.         <a-button type="primary" ghost @click="btn_save">保存</a-button>
123.       </div>
124.     </div>
125.     <json-editor-vue
126.       @update:modelValue="updataModel"
127.       @validationError="editError"
128.       class="editor"
129.       v-model="data"
130.       style="height: 94vh; position: relative"
131.     />
132.   </div>
133. </template>
135. <style scoped>
136. .btn_save {
137.   position: absolute;
138.   top: 0;
139.   right: 0;
140. }
141. .btn_reload {
142.   position: absolute;
143.   top: 0;
144.   right: 60px;
145. }
146. .btn_style {
147.   display: flex;
148.   width: 100%;
149.   justify-content: space-between;
150.   padding: 10px 16px 16px;
151.   box-sizing: border-box;
152.   height: 50px;
153. }
154. .btn_left {
155.   width: 380px;
156.   display: flex;
157.   justify-content: space-between;
158. }
159. .btn_right {
160.   width: 140px;
161.   display: flex;
162.   justify-content: space-between;
163. }
164. </style>

复制代码

注：本项目中，按钮样式、成功失败提示，使用 Ant-Design-Vue插件，按需安装插件。官方网址：Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。