useBreakpoints

Demo

source

当前断点: []

活动断点:

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>

预设

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'
// 以此类推

类型声明

显示类型声明

typescript

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"
}
/**
 * 响应式视口断点
 *
 * @see https://vueuse.org/useBreakpoints
 */
export declare function useBreakpoints<K extends string>(
  breakpoints: Breakpoints<K>,
  options?: UseBreakpointsOptions,
): Record<K, Ref<boolean, boolean>> & {
  greaterOrEqual: (k: MaybeRefOrGetter<K>) => Ref<boolean, boolean>
  smallerOrEqual: (k: MaybeRefOrGetter<K>) => Ref<boolean, boolean>
  greater(k: MaybeRefOrGetter<K>): Ref<boolean, boolean>
  smaller(k: MaybeRefOrGetter<K>): Ref<boolean, boolean>
  between(a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>): Ref<boolean, 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<string[]>
  active(): ComputedRef<string | undefined>
}
export type UseBreakpointsReturn<K extends string = string> = {
  greater: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
  greaterOrEqual: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
  smaller: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
  smallerOrEqual: (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<string[]>
  active: ComputedRef<string>
} & Record<K, ComputedRef<boolean>>