高度为 100% 的 Vue 组件在 v-if 重新渲染时改变高度
Posted
技术标签:
【中文标题】高度为 100% 的 Vue 组件在 v-if 重新渲染时改变高度【英文标题】：Vue component with height of 100% changes height on v-if re-render 【发布时间】：2018-06-16 13:26:41 【问题描述】：我有一个 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，原因我不会在此详述。
【问题讨论】：
您是否尝试过将计算包含在this.$nextTick() 中，如下所述：github.com/vuejs/Discussion/issues/394？
@yuriy636 你是个传奇。这解决了我的问题。我非常感谢你 - 这个问题一直在杀死我。如果您提交您的评论作为答案，我会很乐意接受它:)
【参考方案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-if 重新渲染时改变高度的主要内容，如果未能解决你的问题，请参考以下文章