Skip to content

useBreakpoints

类别
导出体积
1.74 kB
上次更改
2 months ago

响应式的视口断点。

示例

当前断点: []
活动断点:
xs(<640px): false
xs(<=640px): false
sm: false
md: false
lg: false
xl: false
2xl: false
大于断点: false

用法

ts
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

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

js
import { breakpointsTailwind } from '@vueuse/core'
// and so on

类型声明

显示类型声明
ts
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
>
>

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
Anthony Fu
SerKo
Doctor Wu
IlyaL
Adrien Foulon
AAABingBing
Stefano Bartoletti
Ruslan Makarov
jack-allocate
Ed
Adrian Rudnik
Inesh Bose
Imam Susanto
azaleta
webfansplz
Ege İliklier
Shinigami
Alex Kozack
taidaid
wheat
Azri Kahar

更新日志

d32f8 - refactor: add @__NO_SIDE_EFFECTS__ annotations to all pure functions (#4907)
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
55965 - feat(useSSRWidth): add optional support for SSR in useMediaQuery and useBreakpoints (#4317)
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
f71e5 - feat: add breakpoints for ElementUI/ElementPlus (#4238)
3ae45 - feat: add active getter, add breakpoints for Vuetify v3 (#3687)
15fc0 - feat: add strategy option to allow desktop-first convention (#3783)
d3317 - feat: enable passing ref or getter to get breakpoints (#3621)
a086e - fix: stricter types
dc624 - feat: make parameters reactivity (#3592)
ec9a4 - fix: add missing breakpoint for the bootstrap (#3413)
8b5ed - feat: add breakpoints for PrimeFlex (#3317)