我正在使用 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 }"
到
:class="{ 'mb-4': isMounted && $vuetify.breakpoint.smAndDown }"
,并在mounted
生命周期挂钩中添加了:this.isMounted = true
更新:在挖掘发现的Vuetify源代码时,它以200ms的延迟检查窗口宽度,因为窗口宽度检查是一项昂贵的操作。这就是为什么我们会有延迟。