@antv/x6 Stencil初次显示正常，刷新页面不显示了，使用script中的变量，赋值高度，css中使用v-bind(变量) 来解决再次刷新不显示的问题。

1、使用@antv/x6 左侧是个Stencil，右侧是一个Graph显示，官方的文档例子：

https://x6.antv.antgroup.com/zh/examples/showcase/practices#flowchart

大体结构：

官方例子截图：

2、初次加载，一切正常，主动刷新页面，然后变成了一片空白

3、这个问题，测试了半天，终于找出来了，是因为css中高度设置的问题导致。

#stencil {
    width: 130px;
    height: 100%;
    position: relative;
    border-right: 1px solid #dfe3e8;
  }

这里的height：100%，初始显示是正常的，但是刷新以后，这个高度就没了。

4、解决使用Script中自定义变量中的viewState.height来代入，这样就会正常：

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

nextTick(() => {
      viewState.height = document.documentElement.clientHeight;
      viewState.width = document.documentElement.clientWidth;
});

#stencil {
    width: 130px;
    height: v-bind('viewState.height') px;
    position: relative;
    border-right: 1px solid #dfe3e8;
  }

注意：height: v-bind('viewState.height') px，这里的v-bind里的变量，如果是变量的属性的话，则用单引号引起来，这个测试以后发现是可以正常运行的。