fix 流程图画布大小随弹框大小变化

src/components/FlowChart.vue

@@ -67,7 +67,8 @@ export default {
   data () {
     return {
       isLoadEnd: false, // 页面是否加载完成
-      graph: null
+      graph: null,
+      observer: null // 图形容器大小变化监听器
     }
   },
   watch: {
@@ -95,6 +96,10 @@ export default {
   mounted () {
     this.$nextTick(() => {
       this.isLoadEnd = true
+      const dom = document.getElementById(this.domId)
+      this.observer = new ResizeObserver(this.handleResize)
+      console.log(this.observer)
+      this.observer.observe(dom, { box: 'border-box' })
     })
   },
   methods: {
@@ -301,12 +306,6 @@ export default {
       this.graph.on('node:click', event => {
         this.handleNodeClick(event)
       })
-      window.onresize = () => {
-        if (!this.graph || this.graph.get('destroyed')) {
-          return
-        }
-        this.graph.changeSize(document.getElementById(this.domId).clientWidth, document.getElementById(this.domId).clientHeight)
-      }
     },
     /**
      * 节点点击事件
@@ -329,7 +328,19 @@ export default {
     },
     handleDelete (item) {
       this.$emit('delete', item)
+    },
+    /**
+     * 处理元素大小变化
+     */
+    handleResize () {
+      if (!this.graph || this.graph.get('destroyed')) {
+        return
+      }
+      this.graph.changeSize(document.getElementById(this.domId).clientWidth, document.getElementById(this.domId).clientHeight)
     }
+  },
+  beforeDestroy () {
+    this.observer.disconnect()
   }
 }
 </script>

src/components/FlowChartModal.vue

@@ -60,4 +60,10 @@ export default {
   width: 100%;
   height: calc(100vh - 200px - 55px - 48px);
 }
+
+.fullscreen {
+  /deep/ #flowChart {
+    height: calc(100vh - 55px - 48px);
+  }
+}
 </style>