Vuetify断点在Nuxt.js中不起作用

时间:2018-06-22 15:18:55

标签: vue.js vuejs2 vuetify.js nuxt.js

我正在使用 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的延迟检查窗口宽度,因为窗口宽度检查是一项昂贵的操作。这就是为什么我们会有延迟。

0 个答案:

没有答案