我正在使用一个项目Nuxt.js作为 SSR 发动机和Vuetify作为样式框架。在我的模板之一中,我有这样的代码:
<v-layout row wrap align-center
:class="{ 'mb-4': $vuetify.breakpoint.smAndDown }">...</v-layout>
如你所见,我想申请mb-4仅当我在小屏幕和更小的屏幕上时才上课。但是,当我在桌面大屏幕上加载它并检查元素时,即使屏幕分辨率与应用此类的逻辑不匹配,也会附加此类。但是,当我调整浏览器窗口大小时,样式又回到了预期。
我尝试过手动发送'resize'生命周期钩子中的事件:
mounted() {
window.dispatchEvent(new Event('resize'));
}
但这没有帮助。即使我把它包裹起来setTimeout
,仍然没有运气。
UPD:找到了解决方法,但仍然认为这不是最好的解决方案:
改变了
:class="{ 'mb-4': $vuetify.breakpoint.smAndDown }"
to
:class="{ 'mb-4': isMounted && $vuetify.breakpoint.smAndDown }"
and in mounted
添加了生命周期挂钩:this.isMounted = true
更新:在挖掘 Vuetify 源代码时发现,它检查窗口宽度有 200 毫秒的延迟,因为窗口宽度检查是昂贵的操作。这就是我们延迟的原因。