useBreakpoints

分类

浏览器

导出大小

1.74 kB

上次更改

3 个月前

响应式视口断点。

演示

源代码演练场（测试版）

当前断点：[]

活动断点

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

如果你在 SSR 启用时使用 useBreakpoints，你需要指定在服务器上和水合之前渲染的屏幕尺寸，以避免水合不匹配。

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 为你的应用程序全局设置此项。

预设

Tailwind: breakpointsTailwind
Bootstrap v5: breakpointsBootstrapV5
Vuetify v2: breakpointsVuetifyV2 (已弃用: breakpointsVuetify)
Vuetify v3: breakpointsVuetifyV3
Ant Design: breakpointsAntDesign
Quasar v2: breakpointsQuasar
Sematic: breakpointsSematic
Master CSS: breakpointsMasterCss
Prime Flex: breakpointsPrimeFlex
ElementUI / ElementPlus: breakpointsElement

断点预设刻意不自动导入，因为它们不是以 use 开头，以保留 VueUse 的作用域。它们必须显式导入。

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 {
  /**
   * 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.cn/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
>
>