feat: 新增查看json的功能

Author: JakHuang

src/styles/mixin.scss

@@ -0,0 +1,33 @@
+@mixin action-bar {
+  .action-bar {
+    height: 33px;
+    background: #f2fafb;
+    padding: 0 15px;
+    box-sizing: border-box;
+  
+    .bar-btn {
+      display: inline-block;
+      padding: 0 6px;
+      line-height: 32px;
+      color: #8285f5;
+      cursor: pointer;
+      font-size: 14px;
+      user-select: none;
+      & i {
+        font-size: 20px;
+      }
+      &:hover {
+        color: #4348d4;
+      }
+    }
+    .bar-btn + .bar-btn {
+      margin-left: 8px;
+    }
+    .delete-btn {
+      color: #f56c6c;
+      &:hover {
+        color: #ea0b30;
+      }
+    }
+  }
+}

src/views/index/FormDrawer.vue

@@ -125,7 +125,7 @@ export default {
   created() {},
   mounted() {
     window.addEventListener('keydown', this.preventDefaultSave)
-    const a = new ClipboardJS('.copy-btn', {
+    const clipboard = new ClipboardJS('.copy-btn', {
       text: trigger => {
         const codeStr = this.generateCode()
         this.$notify({
@@ -136,6 +136,9 @@ export default {
         return codeStr
       }
     })
+    clipboard.on('error', e => {
+      this.$message.error('代码复制失败')
+    })
   },
   beforeDestroy() {
     window.removeEventListener('keydown', this.preventDefaultSave)
@@ -268,6 +271,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixin.scss';
 .tab-editor {
   position: absolute;
   top: 33px;
@@ -293,44 +297,15 @@ export default {
 }
 .right-preview {
   height: 100%;
-  .action-bar {
-    height: 33px;
-    background: #f2fafb;
-    padding: 0 15px;
-    box-sizing: border-box;
-  }
   .result-wrapper {
     height: calc(100vh - 33px);
     width: 100%;
     overflow: auto;
     padding: 12px;
     box-sizing: border-box;
   }
-  .bar-btn {
-    display: inline-block;
-    padding: 0 6px;
-    line-height: 32px;
-    color: #8285f5;
-    cursor: pointer;
-    font-size: 14px;
-    user-select: none;
-    & i {
-      font-size: 20px;
-    }
-    &:hover {
-      color: #4348d4;
-    }
-  }
-  .bar-btn + .bar-btn {
-    margin-left: 8px;
-  }
-  .delete-btn {
-    color: #f56c6c;
-    &:hover {
-      color: #ea0b30;
-    }
-  }
 }
+@include action-bar;
 ::v-deep .el-drawer__header {
   display: none;
 }

src/views/index/Home.vue

@@ -47,6 +47,9 @@
         <el-button icon="el-icon-video-play" type="text" @click="run">
           运行
         </el-button>
+        <el-button icon="el-icon-view" type="text" @click="showJson">
+          查看json
+        </el-button>
         <el-button icon="el-icon-download" type="text" @click="download">
           导出vue文件
         </el-button>
@@ -100,6 +103,11 @@
       size="100%"
       :generate-conf="generateConf"
     />
+    <json-drawer
+      size="60%"
+      :visible.sync="jsonDrawerVisible"
+      :json-str="JSON.stringify(formData)"
+    />
     <code-type-dialog
       :visible.sync="dialogVisible"
       title="选择生成类型"
@@ -118,6 +126,7 @@ import beautifier from 'beautifier'
 import ClipboardJS from 'clipboard'
 import render from '@/components/render'
 import FormDrawer from './FormDrawer'
+import JsonDrawer from './JsonDrawer'
 import RightPanel from './RightPanel'
 import {
   inputComponents, selectComponents, layoutComponents, formConf
@@ -150,6 +159,7 @@ export default {
     draggable,
     render,
     FormDrawer,
+    JsonDrawer,
     RightPanel,
     CodeTypeDialog,
     DraggableItem
@@ -169,6 +179,7 @@ export default {
       drawerVisible: false,
       formData: {},
       dialogVisible: false,
+      jsonDrawerVisible: false,
       generateConf: null,
       showFileName: false,
       activeData: drawingDefalut[0],
@@ -351,6 +362,10 @@ export default {
       const css = cssStyle(makeUpCss(this.formData))
       return beautifier.html(html + script + css, beautifierConf.html)
     },
+    showJson() {
+      this.AssembleFormData()
+      this.jsonDrawerVisible = true
+    },
     download() {
       this.dialogVisible = true
       this.showFileName = true

src/views/index/JsonDrawer.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <el-drawer v-bind="$attrs" v-on="$listeners" @opened="onOpen" @close="onClose">
+      <div class="action-bar" :style="{'text-align': 'left'}">
+        <span ref="copyBtn" class="bar-btn copy-json-btn">
+          <i class="el-icon-document-copy" />
+          复制JSON
+        </span>
+        <span class="bar-btn delete-btn" @click="$emit('update:visible', false)">
+          <i class="el-icon-circle-close" />
+          关闭
+        </span>
+      </div>
+      <div id="editorJson" :style="{height: '100%'}" />
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import monaco from 'monaco'
+import beautifier from 'beautifier'
+import { beautifierConf } from '@/utils/index'
+import ClipboardJS from 'clipboard'
+
+export default {
+  components: {},
+  props: {
+    jsonStr: {
+      type: String,
+      required: true,
+      beautifier: null,
+      jsonEditor: null
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    const clipboard = new ClipboardJS('.copy-json-btn', {
+      text: trigger => {
+        this.$notify({
+          title: '成功',
+          message: '代码已复制到剪切板，可粘贴。',
+          type: 'success'
+        })
+        return this.beautifierJson
+      }
+    })
+    clipboard.on('error', e => {
+      this.$message.error('代码复制失败')
+    })
+  },
+  methods: {
+    onOpen() {
+      this.beautifierJson = beautifier.js(this.jsonStr, beautifierConf.js)
+      this.setEditorValue('editorJson', this.beautifierJson)
+    },
+    onClose() {},
+    setEditorValue(id, codeStr) {
+      if (this.jsonEditor) {
+        this.jsonEditor.setValue(codeStr)
+      } else {
+        this.jsonEditor = monaco.editor.create(document.getElementById(id), {
+          value: codeStr,
+          theme: 'vs-dark',
+          language: 'json',
+          automaticLayout: true
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixin.scss';
+
+::v-deep .el-drawer__header {
+  display: none;
+}
+@include action-bar;
+</style>