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

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-commonjs

2. 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