useBreakpoints

类别

浏览器

导出大小

919 B

上次更改

5 天前

响应式视口断点。

演示

源代码

当前断点： []

活动断点

xs(<640px): false

xs(<=640px): false

sm: false

md: false

lg: false

xl: false

2xl: false

greaterThanBreakPoint: 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，那么您需要指定要在服务器上渲染并在 hydration 之前渲染的屏幕尺寸，以避免 hydration 不匹配

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

类型声明

显示类型声明

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