useBreakpoints

类别

Browser

导出体积

1.74 kB

上次更改

2 months ago

响应式的视口断点。

示例

源码 playground (beta)

当前断点: []

活动断点:

xs(<640px): false

xs(<=640px): false

sm: false

md: false

lg: false

xl: false

2xl: false

大于断点: false

用法

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

const breakpoints
 = useBreakpoints
(breakpointsTailwind
)

const smAndLarger
 = breakpoints
.greaterOrEqual
('sm') // sm 及以上
const largerThanSm
 = breakpoints
.greater
('sm') // 仅大于 sm
const lgAndSmaller
 = breakpoints
.smallerOrEqual
('lg') // lg 及以下
const smallerThanLg
 = breakpoints
.smaller
('lg') // 仅小于 lg

vue

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

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

// 可能是 'mobile'、'tablet'、'laptop' 或 'desktop'
const activeBreakpoint
 = breakpoints
.active
()

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

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

Server Side Rendering and Nuxt

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
})

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

Presets

Tailwind: breakpointsTailwind
Bootstrap v5: breakpointsBootstrapV5
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

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

类型声明

显示类型声明

export * from "./breakpoints"
export type Breakpoints
<K
 extends string = string> = Record
<
  K
,
  MaybeRefOrGetter
<number | string>
>
export interface UseBreakpointsOptions extends ConfigurableWindow {
  /**
   * 用于生成快捷方法（例如 `.lg`）的查询策略
   *
   * 'min-width' - 当视口大于或等于 lg 断点时，.lg 将为 true（移动优先）
   * 'max-width' - 当视口小于 xl 断点时，.lg 将为 true（桌面优先）
   *
   * @default "min-width"
   */
  strategy
?: "min-width" | "max-width"
  ssrWidth
?: number
}
/**
 * 响应式视口断点
 *
 * @see https://vueuse.org/useBreakpoints
 *
 * @__NO_SIDE_EFFECTS__
 */
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
>
>