vue3 @antv/x6 antdv3 切换tabs的tabpane以后，并且浏览器在调整大小的时候，再次回到页面x6会不显示或者显示的宽度自动缩小或者为0的情况的解决

1、先上个图：

图1

2、这里我们要监听一下浏览器视口改变：

onUnmounted(() => {
    removeResizeListener();
  });

  function handleResize() {
    const container = document.getElementById('container');
    viewState.height = document.documentElement.clientHeight;
    viewState.width = document.documentElement.clientWidth;
    //表格高度改变
    gridOptions.height = viewState.height - 200;
    resizeGraph(graph, container?.offsetWidth, container?.offsetHeight);
  }

  // 在模态框打开时添加事件监听
  function addResizeListener() {
    // 监听浏览器窗口大小变化
    window.addEventListener('resize', handleResize);
  }

  // 在模态框关闭时移除事件监听
  function removeResizeListener() {
    window.removeEventListener('resize', handleResize);
  }

  // 当容器大小变化时，重新调整画布大小和缩放
  function resizeGraph(graph, width, height) {
    // nextTick(() => {
    //   graph.resize(width, height);
    // });
    if (graph) {
      graph.dispose();
      nextTick(() => {
        initX6();
        refreshData();
      });
    }
  }

说明：

1、在初始化完成了x6后，调用addResizeListener()方法。

2、这里面的的resizeGraph方法，开始用的是graph.resize方法，经过多次测试，发现还是有问题在里面。其中的一个问题就是用了Scroller，这个会失效，然后页面的滚动条会跑到最外层，导致Tabs切换的时候，因为出现滚动条，左右切换tab时，会有稍些左右的移动的情况。

图1中 Tabs下方是显示X6的区域：

画箭头的位置开始X6的Scroller的滚动。

const viewState = reactive({
    height: 0,
    width: 0,
  });

<div id="container"></div>

3、resizeGraph里面的初始化initX6方法一定要放到nextTick中去执行，否则获取到的宽度、高度全是0。

4、initX6

function initX6() {
    const container = document.getElementById('container');=
    const width = container!.scrollWidth || 900;
    // const height = container!.scrollHeight || 500;
    const height = viewState.height - 200 || 700;
    graph = new Graph({
      container: container,
      interacting(cellView) {
        return { nodeMovable: false };
      },

      grid: true,
      panning: {
        enabled: true,
        modifiers: 'shift',
      },
      width,
      height,
      mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: 'ctrl',
        minScale: 0.5,
        maxScale: 3,
      },
      connecting: {
        router: 'manhattan',
        connector: {
          name: 'rounded',
          args: {
            radius: 8,
          },
        },
        anchor: 'center',
        connectionPoint: 'anchor',
        allowBlank: false,
        snap: {
          radius: 20,
        },
        createEdge() {
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: '#A2B1C3',
                strokeWidth: 1,
                targetMarker: {
                  name: 'block',
                  width: 12,
                  height: 8,
                },
              },
            },
            zIndex: 0,
          });
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet;
        },
      },
    });

    graph.use(
      new Scroller({
        enabled: true,
        padding: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
        },
        pageVisible: false,
        pageBreak: false,
        autoResize: true,
        className: 'scrollerCss',
      }),
    );

    ......

    addResizeListener();
  }

5、这里用的方法是在改变视口大小的时候，先将存在的graph画布dispose掉，然后重新初始化，这样不管咱切换，放大，缩小，都是正确的展示。

6、当然方法不唯一，这里只是一种方法实现，实测是可以的。