Question

我有一个Vue组件，它有类＆＃34; tab-body-wrapper＆＃34;其目的是显示＆＃34;插槽＆＃34;对于当前处于活动状态的选项卡。

排查后，看来这个＆＃34; .tab-body-wrapper＆＃34;组件，我在我的CSS中设置了100％的高度，在v-if重新渲染期间降低了高度，即使包含它的元素的高度（＆＃34; .sub-menu-tabs-body＆＃） 34;）在同一时间点保持完全相同。

我的Vue组件（类＆＃34; tab-body-wrapper＆＃34;）

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组件的mounted（）挂钩中，该挂钩包含在上述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

然而，在单击然后单击返回选项卡后，您可以看到包含元素（＆＃34; .sub-menu-tabs-body＆＃34;）保留其高度为1153px但是＆＃34; .TAB体的包装器＆＃34;收缩至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的高度＆＃34; .tab-body-wrapper＆＃34;时，我的陌生人是什么？之后，我得到1151px。

对于某些情况，我需要＆＃34; .tab-body-wrapper＆＃34;的高度。在渲染过程中要正确是因为我有一堆d3图表使用＆＃34; .tab-body-wrapper＆＃34;中的元素的高度和宽度。在渲染过程中确定它们各自的高度和宽度。因此，我遇到的问题是导致这些图表以不正确的高度和宽度呈现。

请注意，使用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>

高度为100％的Vue组件在v上更改高度 - 如果重新渲染

1 个答案: