时间戳

首页 > 解决方案 > Nuxt js 中的计算引导断点

twitter-bootstrap - Nuxt js 中的计算引导断点

问题描述

什么是仅在 NuxtJs 应用程序中具有实时活动的屏幕引导断点（例如客户端中的计算数据）的最佳解决方案？

在 Bootstrap 中，我们有像 d-lg-block 这样的类。我想在 VueJs 中使用 v-if 来做到这一点。像： <div v-if="lgAndUpper"></div>

标签： twitter-bootstrapvue.jsbootstrap-4vuejs2nuxt.js

解决方案

你可能需要这个。调整浏览器大小后，将触发此事件。你可以把它放进mounted()去让它工作。

window.addEventListener("resize", function(event) {
    console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');
})

推荐阅读