nuxt-viewport

為你的 Nuxt 專案定義自定義視口

80.3K 次下載•153 顆星•v2.3.1

mvrlin

nuxt-viewport

為你的 Nuxt 專案定義自定義視口

功能

⚡️ 快速輕量，基於 MatchMedia API ⚡️
🕶 自動從 Cookie & User-Agent 檢測裝置視口
👌 零配置即可開始使用
👴 支援 IE9+

注意
此版本僅支援 Nuxt 3 & Nuxt Bridge。對於 Nuxt 2，請參閱 1.0.1

快速設定

將 nuxt-viewport 依賴項新增到你的專案

npx nuxi@latest module add nuxt-viewport

將 nuxt-viewport 新增到 nuxt.config.js 的 modules 部分

{
  modules: [
    [
      'nuxt-viewport', {
        /* Viewport options */
      }
    ],
  ]
}

使用頂級選項

{
  modules: [
    'nuxt-viewport',
  ],

  viewport: {
    /* Viewport options */
  },
}

使用

<script setup>
import { useNuxtApp } from '#app'
const { $viewport } = useNuxtApp()

watch($viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
})
</script>

<template>
  <div>
    <div v-if="$viewport.isLessThan('tablet')">Should render only on mobile</div>
    <div v-else>Current breakpoint: {{ $viewport.breakpoint }}</div>
  </div>
</template>

與可組合函式一起使用

<script setup>
const viewport = useViewport()

watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
})
</script>

<template>
  <div>
    <div v-if="viewport.isLessThan('tablet')">Should render only on mobile</div>
    <div v-else>Current breakpoint: {{ viewport.breakpoint }}</div>
  </div>
</template>

與 "@nuxt/bridge" 一起使用

<script setup>
const viewport = useViewport()

watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
})
</script>

<template>
  <div>
    <div v-if="viewport.isLessThan('tablet')">Should render only on mobile</div>
    <div v-else>Current breakpoint: {{ $viewport.breakpoint }}</div>
  </div>
</template>

配置

`斷點`

型別：Object

一個物件，其中鍵是視口的名稱，值是視口大小。

型別：Object

一個包含 cookie 選項的物件。更多資訊請參閱 https://www.npmjs.com/package/cookiejs#cookie-attributes

`defaultBreakpoints`

型別：Object
可檢測裝置：bot, desktop, mobile, tablet, tv

一個物件，其中鍵是檢測到的裝置名稱，值是斷點鍵。

`fallbackBreakpoint`

型別：String
預設值：viewport

如果未檢測到裝置，將使用的斷點鍵。

`feature`

型別：'minWidth' | 'maxWidth'
預設值：'minWidth'

CSS 媒體特性。

預設配置

{
  // ...
  viewport: {
    breakpoints: {
      desktop: 1024,
      desktopMedium: 1280,
      desktopWide: 1600,

      mobile: 320,
      mobileMedium: 375,
      mobileWide: 425,

      tablet: 768,
    },

    cookie: {
      expires: 365, // 365 days
      name: 'viewport',
      path: '/',
      sameSite: 'Strict',
      secure: true,
    },

    defaultBreakpoints: {
      desktop: 'desktop',
      mobile: 'mobile',
      tablet: 'tablet',
    },

    fallbackBreakpoint: 'desktop',

    feature: 'minWidth',
  },
  // ...
}

Tailwind CSS 的示例配置

{
  // ...
  viewport: {
    breakpoints: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      '2xl': 1536,
    },

    defaultBreakpoints: {
      desktop: 'lg',
      mobile: 'xs',
      tablet: 'md',
    },

    fallbackBreakpoint: 'lg'
  },
  // ...
}

按頁面配置

你可以使用 definePageMeta 覆蓋特定頁面的全域性配置。

<script setup>
definePageMeta({
  viewport: {
    breakpoints: {
      desktop: 1024,
      mobile: 320,
      tablet: 768
    },
    cookie: {
      name: 'viewport-per-page'
    }
    // Other fields will be inherited from the global configuration
  }
})
</script>

API

`viewport.breakpoint`

型別：String

當前斷點。

`viewport.breakpointValue`

型別：Number

// Example using defaults.

viewport.breakpointValue('desktop') // Result: 1024.
viewport.breakpointValue('tablet') // Result: 768.
viewport.breakpointValue('mobile') // Result: 320.

`viewport.isGreaterThan`

型別：Boolean

// Example: viewport.breakpoint is "mobile".

viewport.isGreaterThan('mobile') // Result: false.
viewport.isGreaterThan('desktop') // Result: false.

`viewport.isGreaterOrEquals`

型別：Boolean

// Example: viewport.breakpoint is "mobile".

viewport.isGreaterOrEquals('mobile') // Result: true.
viewport.isGreaterOrEquals('desktop') // Result: false.

`viewport.isLessThan`

型別：Boolean

// Example: viewport.breakpoint is "desktop".

viewport.isLessThan('desktopWide') // Result: true.
viewport.isLessThan('mobile') // Result: false.

`viewport.isLessOrEquals`

型別：Boolean

// Example: viewport.breakpoint is "tablet".

viewport.isLessOrEquals('tablet') // Result: true.
viewport.isLessOrEquals('mobile') // Result: false.

`viewport.match`

型別：Boolean

// Example: viewport.breakpoint is "tablet".

viewport.match('tablet') // Result: true.
viewport.match('desktop') // Result: false.

`viewport.matches`

型別：Boolean

// Example: viewport.breakpoint is "mobileWide".

viewport.matches('tablet', 'mobileWide') // Result: true.
viewport.matches('mobile', 'tablet') // Result: false.

`viewport.queries`

型別：Object

包含生成的媒體查詢的物件。

貢獻

您可以透過 CodeSandBox 線上為該模組貢獻程式碼

或在本地

克隆此倉庫
使用 yarn install 或 npm install 安裝依賴項
使用 yarn dev 或 npm run dev 啟動開發伺服器

許可證

麻省理工學院許可證