Sveltesveltebody

Svelte <svelte:body>

和<svelte:window>类似,该 <svelte:body>标签允许你添加事件监听document.body。 该标签与 mouseenter 和 mouseleave 事件一起使用, 不会触发 window事件。将 mouseenter 和 mouseleave 函数添加到 <svelte:body>标签内:<svelte:body

on:mouseenter={handleMouseenter}

on:mouseleave={handleMouseleave}

/>示例代码App.svelte<script>

let hereKitty = false;

const handleMouseenter = () =&gt; hereKitty = true;

const handleMouseleave = () =&gt; hereKitty = false;

</script>

<style>

img {

position: absolute;

left: 0;

bottom: -60px;

transform: translate(-80%, 0) rotate(-30deg);

transform-origin: 100% 100%;

transition: transform 0.4s;

}

.curious {

transform: translate(-15%, 0) rotate(0deg);

}

:global(body) {

overflow: hidden;

}

</style>

<svelte:body

on:mouseenter={handleMouseenter}

on:mouseleave={handleMouseleave}

/>

<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->

<img

class:curious={hereKitty}

alt="Kitten wants to know what's going on"

src="tutorial/kitten.png"

>