Question

我在获取一些Vis JS Networks来正确填充“”元素中应用栏下方的可用空间时遇到了一些问题。图元素将填充该空间，但是我必须同时应用于'.v-tabs-items'和'.v-window-item'的100％I高度似乎忽略了填充并创建了滚动条，我还设置了100％的宽度，并且没有水平滚动。

在调整窗口大小时，它也无法正确调整，需要使用选项卡开关将其重新调整为正确的大小。

如果我删除了100％的高度和宽度，那么制表符的内容将被限制为较小的矩形。

我已经简化了相关代码，下面有两部分，分别是App.Vue文件和GraphView.Vue文件，该文件包含主屏幕，而GraphView.Vue文件包含用于绘制图形的组件。

>

App.Vue

<template>
  <v-app>
    <v-app-bar app>
      <v-toolbar-title class="headline text-uppercase">
        <span>Test</span>
      </v-toolbar-title>
      <template v-slot:extension>
        <v-tabs v-model="graphTab">
          <v-tab v-for="(graph, title) in getGraphData()" :key="title">
            {{ title }}
            <span style="display: none"> {{ graph }}</span>
          </v-tab>
        </v-tabs>
      </template>
    </v-app-bar>

    <v-content>
      <v-container fluid fill-height>
        <v-tabs-items v-model="graphTab">
          <v-tab-item v-for="(graph, title) in getGraphData()" :key="title">
            <GraphView
              :nodes="graph.nodes"
              :edges="graph.edges"
              :options="defaultVisOptions"
            ></GraphView>
          </v-tab-item>
        </v-tabs-items>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import GraphView from "./components/GraphView";
import { DataSet } from "vis-network";
const defaultVisOptions = {
  autoResize: true,
  height: "100%",
  width: "100%",
  edges: {
    arrows: "to"
  },
  nodes: {
    shape: "circle"
  }
};
export default {
  name: "App",
  components: {
    GraphView
  },
  data: () => ({
    defaultVisOptions: defaultVisOptions,
    graphTab: null
  }),
  methods: {
    getGraphData: function() {
      return {
        "Graph 1": {
          nodes: new DataSet([
            { id: 1, label: "Node 1" },
            { id: 2, label: "Node 2" },
            { id: 3, label: "Node 3" },
            { id: 4, label: "Node 4" },
            { id: 5, label: "Node 5" }
          ]),
          edges: new DataSet([
            { from: 1, to: 3 },
            { from: 1, to: 2 },
            { from: 2, to: 4 },
            { from: 2, to: 5 }
          ])
        },
        "Graph 2": {
          nodes: new DataSet([
            { id: 1, label: "Node 1" },
            { id: 2, label: "Node 2" },
            { id: 3, label: "Node 3" },
            { id: 4, label: "Node 4" },
            { id: 5, label: "Node 5" }
          ]),
          edges: new DataSet([
            { from: 1, to: 2 },
            { from: 2, to: 3 },
            { from: 3, to: 4 },
            { from: 4, to: 5 }
          ])
        }
      };
    }
  }
};
</script>

<style scoped>
.v-tabs-items {
  height: 100%;
  width: 100%;
}

.v-window-item {
  height: 100%;
  width: 100%;
}
</style>

GraphView.Vue

<template>
  <div class="graphContainer" ref="graphContainer"></div>
</template>

<script>
import { Network } from "vis-network";
export default {
  name: "GraphView",
  props: ["nodes", "edges", "options"],
  mounted() {
    this.network = new Network(
      this.$refs.graphContainer,
      { nodes: this.$props.nodes, edges: this.$props.edges },
      this.$props.options
    );
  }
};
</script>

<style scoped>
.graphContainer {
  width: 100%;
  height: 100%;
}
</style>

如上所述，预期结果是图形填充了可用空间而不创建滚动条，但这不会发生。

Answer 1

我没有使用您的代码对其进行测试，但是容器的样式应为：

<div style="position: relative; width: 100%; height: 100%;">
  <div
    style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
    ref="graphContainer"
  />
</div>

这样，它将填充所有可用空间（您可能需要在父级上设置position: relative），而无需进一步拉伸。

Vis网路+ Vuetify标签-网路不会填满萤幕

App.Vue

GraphView.Vue

1 个答案: