小编imt*_*grv的帖子

如何在 Nuxt3 中检测用户设备并相应加载 UI

我正在从事 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)

nuxt.js vuejs3 nuxtjs3

6
推荐指数
1
解决办法
7472
查看次数

mongo DB集合、文档和数据库的大小限制

过去几个月我一直在学习和工作 MongoDB,现在我对每个文档 16 MB 的最大大小限制感到非常困惑。我只是想知道,这个 16 MB 大小限制是否适用于集合内的单个文档,或者此限制也适用于单个集合。

由于我有一个包含酒店架构的集合,因此我将在其中添加超过 5,00,000 个文档作为酒店信息。

我试图找出每个集合的最大限制,但没有找到一些信息。我真的很欣赏这里的一些亮点。

limit mongodb

2
推荐指数
1
解决办法
5836
查看次数

滚动行为在 Nuxt3 应用程序中不起作用

当我使用 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)

vue-router nuxt.js nuxtjs3

2
推荐指数
1
解决办法
8411
查看次数

标签 统计

nuxt.js ×2

nuxtjs3 ×2

limit ×1

mongodb ×1

vue-router ×1

vuejs3 ×1