Skip to content

useBreakpoints

反应式视口断点。

¥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

js
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
vue
<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>

服务器端渲染和 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

js
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 v2: breakpointsVuetifyV2 (deprecated: breakpointsVuetify)

  • Vuetify v3:breakpointsVuetifyV3

  • Ant Design:breakpointsAntDesign

  • Quasar v2:breakpointsQuasar

  • Sematic:breakpointsSematic

  • Master 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:

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

类型声明

显示类型声明
typescript
export * from "./breakpoints"
export type Breakpoints<K extends string = string> = Record<
  K,
  MaybeRefOrGetter<number | string>
>
export interface UseBreakpointsOptions extends ConfigurableWindow {
  /**
   * The query strategy to use for the generated shortcut methods like `.lg`
   *
   * 'min-width' - .lg will be true when the viewport is greater than or equal to the lg breakpoint (mobile-first)
   * 'max-width' - .lg will be true when the viewport is smaller than the xl breakpoint (desktop-first)
   *
   * @default "min-width"
   */
  strategy?: "min-width" | "max-width"
  ssrWidth?: number
}
/**
 * Reactively viewport breakpoints
 *
 * @see https://vueuse.org/useBreakpoints
 */
export declare function useBreakpoints<K extends string>(
  breakpoints: Breakpoints<K>,
  options?: UseBreakpointsOptions,
): Record<K, ComputedRef<boolean>> & {
  greaterOrEqual: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
  smallerOrEqual: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
  greater(k: MaybeRefOrGetter<K>): ComputedRef<boolean>
  smaller(k: MaybeRefOrGetter<K>): ComputedRef<boolean>
  between(a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>): ComputedRef<boolean>
  isGreater(k: MaybeRefOrGetter<K>): boolean
  isGreaterOrEqual(k: MaybeRefOrGetter<K>): boolean
  isSmaller(k: MaybeRefOrGetter<K>): boolean
  isSmallerOrEqual(k: MaybeRefOrGetter<K>): boolean
  isInBetween(a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>): boolean
  current: () => ComputedRef<K[]>
  active(): ComputedRef<"" | K>
}
export type UseBreakpointsReturn<K extends string = string> = ReturnType<
  typeof useBreakpoints<K>
>

源代码

源代码示例文档

变更日志

v12.3.0 on 1/2/2025
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
v12.1.0 on 12/22/2024
55965 - feat(useSSRWidth): add optional support for SSR in useMediaQuery and useBreakpoints (#4317)

VueUse 中文网 - 粤ICP备13048890号