vue3+json-editor-vue3实现JSON编辑器
json-editor-vue3 GitHub官网：GitHub - guyue88/json-editor-vue3一. 介绍
基于 jsoneditor 开发的vue3 json editor，支持全屏编辑，有完善的变乱回调，可以在失去焦点时，对编辑器内容做校验。
https://img-blog.csdnimg.cn/direct/218c8ae8b62f41789d2bda5f78fbd1ad.png
二. 安装
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-commonjs 2. vite.config.js 内
// vite.config.js
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
export default defineConfig({
plugins: ,
}) 五. 完备项目代码（将代码中接口相关代码更换成自己的！！！）
<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) {
line.value = error.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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]