预览展示页新增缩放工具

 <!--
  * @Date: 2023-12-18 15:01:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-18 15:09:35
+ * @LastEditTime: 2024-07-15 11:12:22
  * @FilePath: /vue-flow-editor/src/editor/vue-flow-editor-preview1.vue
  * @Description: 文件描述
 -->
 <template>
     <transition name="vue-flow-editor-preview-transition">
         <div class="vue-flow-editor-preview1" v-if="p_value">
-            <div class="vue-flow-editor-preview-body" ref="body">
+            <div class="vue-flow-editor-preview-body" ref="body" style="overflow: scroll;">
                 <div class="vue-flow-editor-preview-target" ref="target"></div>
             </div>
+            <div style="position: fixed; bottom: 1rem; right: 1rem; font-size: 25px;">
+                <div @click="zoomIn"><i class="el-icon-zoom-in"></i></div>
+                <div @click="zoomOut"><i class="el-icon-zoom-out"></i></div>
+            </div>
         </div>
     </transition>
 </template>
@@ -40,12 +44,16 @@
             return {
                 graph: null,
                 p_value: this.value,
+                currentHeight: 0,
+                currentWidth: 0,
             }
         },
         methods: {
             refresh() {
                 const container = this.$refs.target
                 const {offsetHeight, offsetWidth} = this.$refs.body
+                this.currentHeight = offsetHeight;
+                this.currentWidth = offsetWidth;
 
                 if (!!this.graph) {
                     this.graph.destroy()
@@ -71,6 +79,56 @@
                 this.p_value = false
                 this.$emit('input', this.p_value)
             },
+            zoomIn() {
+                const container = this.$refs.target
+                this.currentWidth = this.currentWidth + 100;
+                this.currentHeight = this.currentHeight + 100;
+
+                if (!!this.graph) {
+                    this.graph.destroy()
+                }
+                this.graph = new G6.Graph({
+                    container,
+                    width: this.currentWidth,
+                    height: this.currentHeight,
+
+                    ...GraphStyle.default,
+                    mode: {
+                        default: [
+                            'drag-canvas',
+                            'zoom-canvas',
+                        ]
+                    },
+                })
+
+                this.graph.read(this.data)
+                this.graph.fitView(20)
+            },
+            zoomOut() {
+                const container = this.$refs.target
+                this.currentWidth = this.currentWidth - 100;
+                this.currentHeight = this.currentHeight - 100;
+
+                if (!!this.graph) {
+                    this.graph.destroy()
+                }
+                this.graph = new G6.Graph({
+                    container,
+                    width: this.currentWidth,
+                    height: this.currentHeight,
+
+                    ...GraphStyle.default,
+                    mode: {
+                        default: [
+                            'drag-canvas',
+                            'zoom-canvas',
+                        ]
+                    },
+                })
+
+                this.graph.read(this.data)
+                this.graph.fitView(20)
+            }
         },
     }
 </script>