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

2024-05-19

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


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

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

https://vuetifyjs.com/en/styles/spacing/#breakpoints https://vuetifyjs.com/en/styles/spacing/#breakpoints

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vuetify 断点在 Nuxt.js 中不起作用 的相关文章

随机推荐