update: 支持全屏预览

Author: shangbin

src/components-v2/ToolsBar.vue

@@ -78,6 +78,10 @@ export default {
     onEditModeChange() {
       this.editMode = !this.editMode;
       this.$emit('onEditModeChange', this.editMode);
+
+      setTimeout(() => {
+        this.editMode = true;
+      }, 500);
     }
   },
   fillter: {},

src/components-v2/VCC.vue

@@ -60,6 +60,11 @@
       <div class="x"></div>
     </div>
   </div>
+
+  <div id="fullScreen" v-if="!editMode">
+    <div style="margin: 20px; font-weight: bold;">按下ESC退出预览模式</div>
+    <div id="mountedEle"></div>
+  </div>
 </template>
 
 <script>
@@ -73,6 +78,7 @@ import keymaster from "keymaster"
 export default {
   name: "vcc",
   props: ['initCodeEntity'],
+  emits: ['updateCodeEntity'],
   components: {
     RawComponents: defineAsyncComponent(() => import("@/components/RawComponents.vue")),
     ToolsBar: defineAsyncComponent(() => import("./ToolsBar")),
@@ -93,7 +99,7 @@ export default {
       iconCode: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/code-working-outline.svg"),
       iconClear: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/trash-outline.svg"),
 
-      viewMode: false
+      editMode: true
     };
   },
   watch: {
@@ -138,6 +144,13 @@ export default {
         this.undo();
         return false
       });
+
+
+      keymaster('esc', () => {
+        this.editMode = true;
+        this.mainPanelProvider.setEditMode(true);
+        return false
+      });
     },
 
     init() {
@@ -204,7 +217,11 @@ export default {
     },
 
     onEditModeChange(newValue) {
-      this.mainPanelProvider.setEditMode(newValue);
+      this.editMode = newValue;
+
+      this.$nextTick(() => {
+        this.mainPanelProvider.setEditMode(newValue, document.querySelector("#mountedEle"));
+      })
     },
 
     renderCode() {
@@ -369,6 +386,21 @@ export default {
     pointer-events: none;
   }
 }
+
+#fullScreen {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 3;
+  top: 0;
+  background: white;
+}
+
+#mountedEle {
+  border: 1px dashed rgb(126, 126, 128);
+  border-radius: 10px;
+  margin: 20px;
+}
 </style>
 
 <!-- 以下的样式作用于渲染容器中-->

src/libs/main-panel.js

@@ -66,15 +66,20 @@ export class MainPanelProvider {
         const componentOptions = (new Function(`return ${newScript}`))();
 
         componentOptions.template = template.content;
-
-        // 渲染当前代码
-        createBaseApp(componentOptions).mount(readyForMoutedElement);
-
-        // 拍平数据结构
-        this.editMode && this.flatDataStructure(rawDataStructure);
-
-        // 开启编辑模式
-        this.editMode && this.enableEditMode();
+        
+        if (this.editMode) {
+            // 渲染当前代码
+            createBaseApp(componentOptions).mount(readyForMoutedElement);
+            
+            // 拍平数据结构
+            this.flatDataStructure(rawDataStructure);
+    
+            // 开启编辑模式
+            this.enableEditMode();
+        } else {
+            // 渲染当前代码
+            createBaseApp(componentOptions).mount(this.mountedEle);
+        }
 
         return this;
     }
@@ -88,8 +93,9 @@ export class MainPanelProvider {
         return this;
     }
 
-    setEditMode(editMode) {
+    setEditMode(editMode, mountedEle) {
         this.editMode = editMode;
+        this.mountedEle = mountedEle;
         this.reRender();
     }
 
@@ -117,6 +123,7 @@ export class MainPanelProvider {
     createMountedElement() {
         const renderControlPanel = this.getControlPanelRoot();
         const child = document.createElement('div');
+        child.style = "background-color: white;"
 
         // 清空子节点
         while (renderControlPanel.firstChild) {
@@ -253,6 +260,7 @@ export class MainPanelProvider {
      * 开启编辑模式，并禁用默认的事件，添加编辑事件
      */
     enableEditMode() {
+        debugger
         const renderControlPanel = this.getControlPanelRoot();
         // 加一个延迟的作用是：给el-table这种绘制需要时间的组件留出充足的时间，否则会造成el-table渲染不到页面上
         setTimeout(() => {