json viewer

src/utils/loadBeautifier.js

@@ -1,5 +1,5 @@
 import loadScript from "./loadScript";
-import ELEMENT from "element-plus";
+import { ElLoading } from "element-plus";
 import pluginsConfig from "./pluginsConfig";
 
 let beautifierObj;
@@ -11,7 +11,7 @@ export default function loadBeautifier(cb) {
     return;
   }
 
-  const loading = ELEMENT.Loading.service({
+  const loading = ElLoading.service({
     fullscreen: true,
     lock: true,
     text: "格式化资源加载中...",
@@ -22,6 +22,7 @@ export default function loadBeautifier(cb) {
   loadScript(beautifierUrl, () => {
     loading.close();
     // eslint-disable-next-line no-undef
+    console.log(beautifier);
     beautifierObj = beautifier;
     cb(beautifierObj);
   });

src/utils/loadMonaco.js

@@ -1,5 +1,5 @@
 import loadScript from "./loadScript";
-import ELEMENT from "element-plus";
+import { ElLoading } from "element-plus";
 import pluginsConfig from "./pluginsConfig";
 
 // monaco-editor单例
@@ -18,7 +18,7 @@ export default function loadMonaco(cb) {
   const { monacoEditorUrl: vs } = pluginsConfig;
 
   // 使用element ui实现加载提示
-  const loading = ELEMENT.Loading.service({
+  const loading = ElLoading.service({
     fullscreen: true,
     lock: true,
     text: "编辑器资源初始化中...",

src/utils/loadScript.js

@@ -1,4 +1,4 @@
-const callbacks = {}
+const callbacks = {};
 
 /**
  * 加载一个远程脚本
@@ -6,44 +6,46 @@ const callbacks = {}
  * @param {Function} callback 回调
  */
 function loadScript(src, callback) {
-  const existingScript = document.getElementById(src)
-  const cb = callback || (() => {})
+  const existingScript = document.getElementById(src);
+  const cb = callback || (() => {});
   if (!existingScript) {
-    callbacks[src] = []
-    const $script = document.createElement('script')
-    $script.src = src
-    $script.id = src
-    $script.async = 1
-    document.body.appendChild($script)
-    const onEnd = 'onload' in $script ? stdOnEnd.bind($script) : ieOnEnd.bind($script)
-    onEnd($script)
+    callbacks[src] = [];
+    const $script = document.createElement("script");
+    $script.src = src;
+    $script.id = src;
+    $script.async = 1;
+    document.body.appendChild($script);
+    const onEnd =
+      "onload" in $script ? stdOnEnd.bind($script) : ieOnEnd.bind($script);
+    onEnd($script);
   }
 
-  callbacks[src].push(cb)
+  callbacks[src].push(cb);
 
   function stdOnEnd(script) {
     script.onload = () => {
-      this.onerror = this.onload = null
-      callbacks[src].forEach(item => {
-        item(null, script)
-      })
-      delete callbacks[src]
-    }
+      this.onerror = this.onload = null;
+      callbacks[src].forEach((item) => {
+        item(null, script);
+      });
+      delete callbacks[src];
+    };
     script.onerror = () => {
-      this.onerror = this.onload = null
-      cb(new Error(`Failed to load ${src}`), script)
-    }
+      this.onerror = this.onload = null;
+      cb(new Error(`Failed to load ${src}`), script);
+    };
   }
 
   function ieOnEnd(script) {
     script.onreadystatechange = () => {
-      if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
-      this.onreadystatechange = null
-      callbacks[src].forEach(item => {
-        item(null, script)
-      })
-      delete callbacks[src]
-    }
+      if (this.readyState !== "complete" && this.readyState !== "loaded")
+        return;
+      this.onreadystatechange = null;
+      callbacks[src].forEach((item) => {
+        item(null, script);
+      });
+      delete callbacks[src];
+    };
   }
 }
 
@@ -53,8 +55,10 @@ function loadScript(src, callback) {
  * @param {Function} cb 回调
  */
 export function loadScriptQueue(list, cb) {
-  const first = list.shift()
-  list.length ? loadScript(first, () => loadScriptQueue(list, cb)) : loadScript(first, cb)
+  const first = list.shift();
+  list.length
+    ? loadScript(first, () => loadScriptQueue(list, cb))
+    : loadScript(first, cb);
 }
 
-export default loadScript
+export default loadScript;

src/utils/pluginsConfig.js

@@ -12,6 +12,6 @@ export default {
     "beautifier.min.js"
   ),
   // monacoEditorUrl: splicingPluginUrl('monaco-editor', '0.19.3', 'min/vs'), // 使用 monaco-editor CDN 链接
-  monacoEditorUrl: `${publicPath}libs/monaco-editor/vs`, // 使用 monaco-editor 本地代码
+  monacoEditorUrl: `/libs/monaco-editor/vs`, // 使用 monaco-editor 本地代码
   tinymceUrl: splicingPluginUrl("tinymce", "5.7.0", "tinymce.min.js"),
 };

src/views/tool/build/JsonDrawer.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <el-drawer v-bind="$attrs" @opened="onOpen" @close="onClose">
+    <el-drawer
+      :modelValue="$attrs.modelValue"
+      @opened="onOpen"
+      @close="onClose"
+    >
       <div class="action-bar" :style="{ 'text-align': 'left' }">
         <span class="bar-btn" @click="refresh">
           <i class="el-icon-refresh" />
@@ -16,7 +20,7 @@
         </span>
         <span
           class="bar-btn delete-btn"
-          @click="$emit('update:visible', false)"
+          @click="$emit('update:modelValue', false)"
         >
           <i class="el-icon-circle-close" />
           关闭
@@ -37,8 +41,9 @@ import { defineComponent, onBeforeUnmount, onMounted, toRefs } from "vue";
 
 let beautifier;
 let monaco;
+let jsonEditor;
 
-const props = defineComponent({
+const props = defineProps({
   jsonStr: {
     type: String,
     required: true,
@@ -54,27 +59,28 @@ const preventDefaultSave = (e) => {
 const onOpen = () => {
   loadBeautifier((btf) => {
     beautifier = btf;
+    console.log(btf.js);
     beautifierJson.value = beautifier.js(jsonStr.value, beautifierConf.js);
 
     loadMonaco((val) => {
       monaco = val;
-      setEditorValue("editorJson", this.beautifierJson);
+      setEditorValue("editorJson", beautifierJson.value);
     });
   });
 };
 const onClose = () => {};
 const setEditorValue = (id, codeStr) => {
-  if (jsonEditor.value) {
-    jsonEditor.value.setValue(codeStr);
+  if (jsonEditor) {
+    jsonEditor.setValue(codeStr);
   } else {
-    jsonEditor.value = monaco.editor.create(document.getElementById(id), {
+    jsonEditor = monaco.editor.create(document.getElementById(id), {
       value: codeStr,
       theme: "vs-dark",
       language: "json",
       automaticLayout: true,
     });
     // ctrl + s 刷新
-    jsonEditor.value.onKeyDown((e) => {
+    jsonEditor.onKeyDown((e) => {
       if (e.keyCode === 49 && (e.metaKey || e.ctrlKey)) {
         this.refresh();
       }
@@ -88,14 +94,14 @@ const exportJsonFile = () => {
     inputPlaceholder: "请输入文件名",
   }).then(({ value }) => {
     if (!value) value = `${+new Date()}.json`;
-    const codeStr = this.jsonEditor.getValue();
+    const codeStr = jsonEditor.getValue();
     const blob = new Blob([codeStr], { type: "text/plain;charset=utf-8" });
     saveAs(blob, value);
   });
 };
 const refresh = () => {
   try {
-    this.$emit("refresh", JSON.parse(this.jsonEditor.getValue()));
+    this.$emit("refresh", JSON.parse(jsonEditor.getValue()));
   } catch (error) {
     this.$notify({
       title: "错误",

src/views/tool/build/index.vue

@@ -130,7 +130,7 @@
   -->
     <json-drawer
       size="60%"
-      :visible.sync="jsonDrawerVisible"
+      v-model="jsonDrawerVisible"
       :json-str="JSON.stringify(formData)"
       @refresh="refreshJson"
     />