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

【问题标题】：Vuetify breakpoints not working in Nuxt.jsVuetify 断点在 Nuxt.js 中不起作用
【发布时间】：2018-12-02 02:47:50
【问题描述】：

我正在开发一个使用 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 毫秒的延迟检查窗口宽度，因为窗口宽度检查是一项昂贵的操作。这就是我们延迟的原因。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：