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

Question

我正在开发一个使用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 源代码时发现，它以 200 毫秒的延迟检查窗口宽度，因为窗口宽度检查是一项代价高昂的操作。这就是为什么我们有延迟。

Answer 1

您可以为边距和填充属性指定特定的断点。

<v-layout row wrap align-center class="mb-sm-4">...</v-layout>