gpt4 book ai didi

javascript - nuxt layout - 为移动端和桌面端提供不同的布局

转载 作者:行者123 更新时间:2023-12-05 07:12:17 29 4
gpt4 key购买 nike

import { isMobile } from 'mobile-device-detect'

export default {
layout(context) {
const mobile = isMobile ? 'mobile-layout' : 'desktop-layout
return mobile
}
}

我正在创建一个 nuxt 应用程序。我正在尝试检测 View 何时是移动 View 或桌面 View 。如果我更改我的 ide 中的代码并保存,则 isMobile 为真,并且它将设置为移动布局。但是,一旦您刷新页面,isMobile 为 false,它将设置为桌面移动版。

我假设在它有时间确定 isMobile 是真还是假之前设置布局,并自动设置得太假。

我不知道如何让这样的东西发挥作用。无论我尝试什么,它总是失败。

最佳答案

当我们只有 Nuxt 社区为此目的提供官方支持时,为什么还要选择一些通用软件包?我建议您使用 @nuxtjs/device 模块。

它有什么特别之处?这个。 👇

This module injects flags that indicate a device type into the contextand the component instance.

这就是动态更改布局的方法。它在包的文档中提到。 https://github.com/nuxt-community/device-module#nuxtjsdevice

export default {
layout: (ctx) => ctx.isMobile ? 'mobile' : 'default'
}

关于javascript - nuxt layout - 为移动端和桌面端提供不同的布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60460660/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com