我正在从事 Nuxt3 项目。我想为桌面版和移动版使用不同的布局。在某些页面上,一些不同的组件或块取决于设备。
例如,这是布局文件夹中的 default.vue
<template>
<!-- Mobile Layout -->
<div v-if="$isMobile()">
<TopMenu />
<NuxtChild />
<Footer />
</div>
<!-- Mobile Layout End -->
<!-- Desktop Layout -->
<a-layout has-sider v-else>
<a-layout-sider
:style="{
background: '#ffffff',
overflow: 'auto',
height: '100vh',
position: 'fixed',
left: 0,
top: 0,
bottom: 0,
}"
:class="`ttc-invisible sm:ttc-visible`"
>
<MainMenu />
</a-layout-sider>
<a-layout :style="{ marginLeft: '202px', background: '#ffffff' }">
<a-layout-header
:class="`ttc-container ttc-mx-auto`"
:style="{
background: '#ffffff',
padding: 0,
position: 'fixed',
zIndex: 1,
width: '100%',
padding: '5px 25px!important',
}"
> …Run Code Online (Sandbox Code Playgroud) 过去几个月我一直在学习和工作 MongoDB,现在我对每个文档 16 MB 的最大大小限制感到非常困惑。我只是想知道,这个 16 MB 大小限制是否适用于集合内的单个文档,或者此限制也适用于单个集合。
由于我有一个包含酒店架构的集合,因此我将在其中添加超过 5,00,000 个文档作为酒店信息。
我试图找出每个集合的最大限制,但没有找到一些信息。我真的很欣赏这里的一些亮点。
当我使用 Nuxt3 项目时,我遇到了滚动行为问题nuxt-link。
问题是,如果我使用当前页面访问任何页面<nuxt-link>,该页面滚动位置与我在上一页中的位置类似。
但我希望当我更改页面时,页面滚动位置会重置到顶部。
我在/sf/answers/4817357191/上关注了 @kissu 的一些答案,但它们似乎都不起作用。
目前我有
/plugins/route.scrollbehaviour.js
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.$router.options.scrollBehavior = (to, from, savedPosition) => {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
}
})
Run Code Online (Sandbox Code Playgroud)
我的 Package.json (对于任何冲突)
{
"devDependencies": {
"@nuxtjs/tailwindcss": "^5.3.0",
"nuxt": "3.0.0-rc.6",
"nuxt-lodash": "^2.2.0",
"nuxt-schema-org": "^0.6.2",
"unplugin-vue-components": "^0.21.1"
},
"dependencies": {
"@ant-design/icons-vue": "^6.1.0",
"@mdi/js": "^6.7.96",
"@nuxtjs/device": "Redemption198/device-module",
"@pinia/nuxt": "^0.3.0",
"@tailwindcss/typography": "^0.5.2",
"ant-design-vue": …Run Code Online (Sandbox Code Playgroud)