useBreakpoints

类别

Browser

导出体积

1.7 kB

上次更改

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

快捷方法

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

TypeScript

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

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

'use strict'
const breakpoints = useBreakpoints({
  tablet: 640,
  laptop: 1024,
})
// Equivalent to breakpoints.greaterOrEqual('tablet') with min-width strategy
const isTablet = breakpoints.tablet

策略

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

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

TypeScript

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

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

可用方法

方法	描述
`greaterOrEqual(k)`	响应式：视口宽度 >= 断点
`greater(k)`	响应式：视口宽度 > 断点
`smallerOrEqual(k)`	响应式：视口宽度 <= 断点
`smaller(k)`	响应式：视口宽度 < 断点
`between(a, b)`	响应式：视口宽度介于 a 和 b 之间
`isGreaterOrEqual(k)`	非响应式：立即返回布尔值
`isGreater(k)`	非响应式：立即返回布尔值
`isSmallerOrEqual(k)`	非响应式：立即返回布尔值
`isSmaller(k)`	非响应式：立即返回布尔值
`isInBetween(a, b)`	非响应式：立即返回布尔值
`current()`	返回所有匹配断点组成的计算数组
`active()`	返回当前活动断点的计算字符串

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