svelte/reactivity/window
此模块导出各种 window 值的反应版本,每个版本都有一个反应 current 属性,你可以在反应上下文(模板、deriveds 和 effects)中引用它,而无需使用 <svelte:window> 绑定或手动创建自己的事件监听器。
¥This module exports reactive versions of various window values, each of which has a reactive current property that you can reference in reactive contexts (templates, deriveds and effects) without using <svelte:window> bindings or manually creating your own event listeners.
<script>
import { innerWidth, innerHeight } from 'svelte/reactivity/window';
</script>
<p>{innerWidth.current}x{innerHeight.current}</p>import {
const devicePixelRatio: {
readonly current: number | undefined;
}
devicePixelRatio.current is a reactive view of window.devicePixelRatio. On the server it is undefined.
Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level,
on Firefox and Safari it won’t.
devicePixelRatio,
const innerHeight: ReactiveValue<number | undefined>innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined.
innerHeight,
const innerWidth: ReactiveValue<number | undefined>innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined.
innerWidth,
const online: ReactiveValue<boolean | undefined>online.current is a reactive view of navigator.onLine. On the server it is undefined.
online,
const outerHeight: ReactiveValue<number | undefined>outerHeight.current is a reactive view of window.outerHeight. On the server it is undefined.
outerHeight,
const outerWidth: ReactiveValue<number | undefined>outerWidth.current is a reactive view of window.outerWidth. On the server it is undefined.
outerWidth,
const screenLeft: ReactiveValue<number | undefined>screenLeft.current is a reactive view of window.screenLeft. It is updated inside a requestAnimationFrame callback. On the server it is undefined.
screenLeft,
const screenTop: ReactiveValue<number | undefined>screenTop.current is a reactive view of window.screenTop. It is updated inside a requestAnimationFrame callback. On the server it is undefined.
screenTop,
const scrollX: ReactiveValue<number | undefined>scrollX.current is a reactive view of window.scrollX. On the server it is undefined.
scrollX,
const scrollY: ReactiveValue<number | undefined>scrollY.current is a reactive view of window.scrollY. On the server it is undefined.
scrollY
} from 'svelte/reactivity/window';devicePixelRatio
自 5.11.0 起可用
¥Available since 5.11.0
devicePixelRatio.current 是 window.devicePixelRatio 的反应式视图。在服务器上它是 undefined。请注意,不同浏览器的行为不同 - 在 Chrome 上,它将响应当前缩放级别,而在 Firefox 和 Safari 上则不会。
¥devicePixelRatio.current is a reactive view of window.devicePixelRatio. On the server it is undefined.
Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level,
on Firefox and Safari it won’t.
const devicePixelRatio: {
get current(): number | undefined;
};innerHeight
自 5.11.0 起可用
¥Available since 5.11.0
innerHeight.current 是 window.innerHeight 的反应式视图。在服务器上它是 undefined。
¥innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined.
const innerHeight: ReactiveValue<number | undefined>;innerWidth
自 5.11.0 起可用
¥Available since 5.11.0
innerWidth.current 是 window.innerWidth 的反应式视图。在服务器上它是 undefined。
¥innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined.
const innerWidth: ReactiveValue<number | undefined>;online
自 5.11.0 起可用
¥Available since 5.11.0
online.current 是 navigator.onLine 的反应式视图。在服务器上它是 undefined。
¥online.current is a reactive view of navigator.onLine. On the server it is undefined.
const online: ReactiveValue<boolean | undefined>;outerHeight
自 5.11.0 起可用
¥Available since 5.11.0
outerHeight.current 是 window.outerHeight 的反应式视图。在服务器上它是 undefined。
¥outerHeight.current is a reactive view of window.outerHeight. On the server it is undefined.
const outerHeight: ReactiveValue<number | undefined>;outerWidth
自 5.11.0 起可用
¥Available since 5.11.0
outerWidth.current 是 window.outerWidth 的反应式视图。在服务器上它是 undefined。
¥outerWidth.current is a reactive view of window.outerWidth. On the server it is undefined.
const outerWidth: ReactiveValue<number | undefined>;screenLeft
自 5.11.0 起可用
¥Available since 5.11.0
screenLeft.current 是 window.screenLeft 的反应式视图。它在 requestAnimationFrame 回调中更新。在服务器上它是 undefined。
¥screenLeft.current is a reactive view of window.screenLeft. It is updated inside a requestAnimationFrame callback. On the server it is undefined.
const screenLeft: ReactiveValue<number | undefined>;screenTop
自 5.11.0 起可用
¥Available since 5.11.0
screenTop.current 是 window.screenTop 的反应式视图。它在 requestAnimationFrame 回调中更新。在服务器上它是 undefined。
¥screenTop.current is a reactive view of window.screenTop. It is updated inside a requestAnimationFrame callback. On the server it is undefined.
const screenTop: ReactiveValue<number | undefined>;scrollX
自 5.11.0 起可用
¥Available since 5.11.0
scrollX.current 是 window.scrollX 的反应式视图。在服务器上它是 undefined。
¥scrollX.current is a reactive view of window.scrollX. On the server it is undefined.
const scrollX: ReactiveValue<number | undefined>;scrollY
自 5.11.0 起可用
¥Available since 5.11.0
scrollY.current 是 window.scrollY 的反应式视图。在服务器上它是 undefined。
¥scrollY.current is a reactive view of window.scrollY. On the server it is undefined.
const scrollY: ReactiveValue<number | undefined>;