高度为 100% 的 Vue 组件在 v-if 重新渲染时改变高度

Question

我有一个 Vue 组件，它具有类“tab-body-wrapper”，其目的是显示当前处于活动状态的任何选项卡的“插槽”。

在排除故障后，我在 CSS 中将高度设置为 100% 的“.tab-body-wrapper”组件似乎在 v-if 重新渲染期间降低了高度即使包含它的元素的高度（“.sub-menu-tabs-body”）在同一时间点保持完全相同。

我的 Vue 组件（带有“tab-body-wrapper”类）

Vue.component("tab", {
    template: `
        <div v-if="isActive"
            class="tab-body-wrapper">
            <slot></slot>
        </div>
    `,
    props: {
        name: { required: true },
        icon: { required: true },
        selected: { default: false }
    },
    data() {
        return {
            isActive: false
        }
    },
    mounted() {
        this.isActive = this.selected;
    }
});

下面的红色箭头显示了这个 Vue 组件在 DOM 中的位置

相关的 CSS

.sub-menu-tabs-wrapper,
.sub-menu-tabs-body,
.tab-body-wrapper {
    height: 100%;
}

我解决问题的方法是将以下代码放在我的其他 Vue 组件的 mount() 挂钩中，该挂钩包含在上述 Vue 组件的 槽中。

下面是我的另一个 Vue 组件的挂载钩子中的故障排除代码，它位于插槽中。请注意，我也使用了 getBoundingClientRect 并且结果相同，因此问题不在于 d3 .

console.log(d3.select(".sub-menu-tabs-wrapper").style("height"));
console.log(d3.select(".sub-menu-tabs-body").style("height"));
console.log(d3.select(".tab-body-wrapper").style("height"));

在初始渲染时，高度符合预期：

scripts.js:791 1207px // .sub-menu-tabs-wrapper
scripts.js:792 1153px // .sub-menu-tabs-body
scripts.js:793 1151px // .tab-body-wrapper

但是，在单击离开然后单击返回选项卡时，您可以看到包含元素（“.sub-menu-tabs-body”）保持其 1153px 的高度，但“.tab-body- wrapper" 已缩小到 574.5px。

scripts.js:791 1207px // .sub-menu-tabs-wrapper
scripts.js:792 1153px // .sub-menu-tabs-body
scripts.js:793 574.5px // .tab-body-wrapper

奇怪的是，当我之后 console.log “.tab-body-wrapper”的高度时，我得到了 1151px。

在某些情况下，我需要“.tab-body-wrapper”的高度在渲染期间正确的原因是因为我有一堆 d3 图表使用“.tab”中元素的高度和宽度-body-wrapper”在渲染期间确定它们各自的高度和宽度。因此，我遇到的问题是导致这些图表以不正确的高度和宽度呈现。

请注意，我的选项卡组件不能使用 v-show，原因我不会在此详述。

Answer 1

尝试将计算封装在 this.$nextTick() 回调中。如文档所述，它将：

延迟回调在下一个 DOM 更新周期后执行

所以元素在执行时被正确渲染。

new Vue({
  el: '#app',
  data: {
    pRect: 0
  },
  mounted() {
    this.$nextTick(() => {
      this.pRect = document.querySelector('p').getBoundingClientRect();
    })
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<body>
  <div id="app">
    <p>My BoundingClientRect is: {{ pRect }}<p>
  </div>
</body>