Skip to main content

svelte/reactivity/window

此模块导出各种 window 值的反应版本,每个版本都有一个反应 current 属性,你可以在反应上下文(模板、derivedseffects)中引用它,而无需使用 <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.

@since5.11.0
devicePixelRatio
,
const innerHeight: ReactiveValue<number | undefined>

innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined.

@since5.11.0
innerHeight
,
const innerWidth: ReactiveValue<number | undefined>

innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined.

@since5.11.0
innerWidth
,
const online: ReactiveValue<boolean | undefined>

online.current is a reactive view of navigator.onLine. On the server it is undefined.

@since5.11.0
online
,
const outerHeight: ReactiveValue<number | undefined>

outerHeight.current is a reactive view of window.outerHeight. On the server it is undefined.

@since5.11.0
outerHeight
,
const outerWidth: ReactiveValue<number | undefined>

outerWidth.current is a reactive view of window.outerWidth. On the server it is undefined.

@since5.11.0
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.

@since5.11.0
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.

@since5.11.0
screenTop
,
const scrollX: ReactiveValue<number | undefined>

scrollX.current is a reactive view of window.scrollX. On the server it is undefined.

@since5.11.0
scrollX
,
const scrollY: ReactiveValue<number | undefined>

scrollY.current is a reactive view of window.scrollY. On the server it is undefined.

@since5.11.0
scrollY
} from 'svelte/reactivity/window';

devicePixelRatio

自 5.11.0 起可用

¥Available since 5.11.0

devicePixelRatio.currentwindow.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.currentwindow.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.currentwindow.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.currentnavigator.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.currentwindow.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.currentwindow.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.currentwindow.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.currentwindow.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.currentwindow.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.currentwindow.scrollY 的反应式视图。在服务器上它是 undefined

¥scrollY.current is a reactive view of window.scrollY. On the server it is undefined.

const scrollY: ReactiveValue<number | undefined>;
上一页 下一页