useBreakpoints

类别

Browser

导出大小

1.71 kB

最近修改

7 months ago

反应式视口断点。

🌐 Reactive viewport breakpoints.

示例

源代码在线运行

Current breakpoints: []

Active breakpoint:

xs(<640px): false

xs(<=640px): false

sm: false

md: false

lg: false

xl: false

2xl: false

greaterThanBreakPoint: false

用法

🌐 Usage

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

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

快捷方法

🌐 Shortcut Methods

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

🌐 You can access breakpoints directly as properties on the returned object. These return reactive refs.

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

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

🌐 The strategy option controls how the shortcut properties behave:

• 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
})

可用方法

🌐 Available Methods

方法	描述
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

🌐 Server Side Rendering and Nuxt

如果你在启用 SSR 的情况下使用 useBreakpoints，那么你需要指定想要在服务器上渲染和在水化之前渲染的屏幕尺寸，以避免水化不匹配

🌐 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 a hydration mismatch

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

🌐 Alternatively you can set this up globally for your app using provideSSRWidth

预设

🌐 Presets

• Tailwind: breakpointsTailwind
• Bootstrap v5: breakpointsBootstrapV5
• Vuetify v2：breakpointsVuetifyV2（不推荐使用：breakpointsVuetify）
• Vuetify v3: breakpointsVuetifyV3
• 蚂蚁设计：breakpointsAntDesign
• Quasar v2: breakpointsQuasar
• 语义：breakpointsSematic
• 精通 CSS：breakpointsMasterCss
• Prime Flex：breakpointsPrimeFlex
• ElementUI / ElementPlus：breakpointsElement

断点预设不会被自动导入，因为它们不以 use 开头来拥有 VueUse 的作用域。必须显式导入它们：

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

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