useBreakpoints

类别

Browser

导出大小

1.71 kB

最近修改

2 days ago

反应式视口断点。

🌐 Reactive viewport breakpoints.

示例

源代码在线运行

Current breakpoints: []

Active breakpoint:

xs(<640px): false

xs(<=640px): false

sm: false

md: false

lg: false

xl: false

2xl: false

greaterThanBreakPoint: false

用法

🌐 Usage

import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)

const smAndLarger = breakpoints.greaterOrEqual('sm') // sm and larger
const largerThanSm = breakpoints.greater('sm') // only larger than sm
const lgAndSmaller = breakpoints.smallerOrEqual('lg') // lg and smaller
const smallerThanLg = breakpoints.smaller('lg') // only smaller than lg

<script setup lang="ts">
import { useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints({
  mobile: 0, // optional
  tablet: 640,
  laptop: 1024,
  desktop: 1280,
})

// Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'
const activeBreakpoint = breakpoints.active()

// true or false
const laptop = breakpoints.between('laptop', 'desktop')
</script>

<template>
  <div :class="activeBreakpoint">
    ...
  </div>
</template>

快捷方法

🌐 Shortcut Methods

你可以直接将断点作为返回对象的属性访问。这些属性返回响应式引用。

🌐 You can access breakpoints directly as properties on the returned object. These return reactive refs.

const breakpoints = useBreakpoints({
  tablet: 640,
  laptop: 1024,
})

// Equivalent to breakpoints.greaterOrEqual('tablet') with min-width strategy
const isTablet = breakpoints.tablet

策略

🌐 Strategy

strategy 选项控制快捷方式属性的行为方式：

🌐 The strategy option controls how the shortcut properties behave:

• min-width（默认，移动优先）：当视口为 >= lg 时，breakpoints.lg 是 true
• max-width（桌面优先）：当视口为 < xl 时，breakpoints.lg 是 true

const breakpoints = useBreakpoints(breakpointsTailwind, {
  strategy: 'max-width', // desktop-first
})

可用方法

🌐 Available Methods

Method	Description
greaterOrEqual(k)	Reactive: viewport width >= breakpoint
greater(k)	Reactive: viewport width > breakpoint
smallerOrEqual(k)	Reactive: viewport width <= breakpoint
smaller(k)	Reactive: viewport width < breakpoint
between(a, b)	Reactive: viewport width between a and b
isGreaterOrEqual(k)	Non-reactive: returns boolean immediately
isGreater(k)	Non-reactive: returns boolean immediately
isSmallerOrEqual(k)	Non-reactive: returns boolean immediately
isSmaller(k)	Non-reactive: returns boolean immediately
isInBetween(a, b)	Non-reactive: returns boolean immediately
current()	Returns computed array of all matching breakpoints
active()	Returns computed string of the current active breakpoint

服务器端渲染和 Nuxt

🌐 Server Side Rendering and Nuxt

如果你在启用了 SSR 的情况下使用 useBreakpoints，那么你需要在服务器渲染和水合之前指定你希望渲染的屏幕尺寸，以避免水合不匹配

🌐 If you are using useBreakpoints with SSR enabled, then you need to specify which screen size you would like to render on the server and before hydration to avoid an hydration mismatch

import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind, {
  ssrWidth: 768 // Will enable SSR mode and render like if the screen was 768px wide
})

或者你可以使用 provideSSRWidth 为你的应用全局设置此项

🌐 Alternatively you can set this up globally for your app using provideSSRWidth

预设

🌐 Presets

• Tailwind: breakpointsTailwind
• Bootstrap v5: breakpointsBootstrapV5
• Vuetify v2：breakpointsVuetifyV2（不推荐使用：breakpointsVuetify）
• Vuetify v3: breakpointsVuetifyV3
• 蚂蚁设计：breakpointsAntDesign
• Quasar v2: breakpointsQuasar
• 语义：breakpointsSematic
• 精通 CSS：breakpointsMasterCss
• Prime Flex：breakpointsPrimeFlex
• ElementUI / ElementPlus：breakpointsElement

断点预设不会被自动导入，因为它们不以 use 开头来拥有 VueUse 的作用域。必须显式导入它们：

🌐 Breakpoint presets are deliberately not auto-imported, as they do not start with use to have the scope of VueUse. They have to be explicitly imported:

import { breakpointsTailwind } from '@vueuse/core'
// and so on