Actions (use:) adalah fungsi yang dipanggil saat elemen ditambahkan ke DOM — seperti custom directive.
Membuat Action
export function clickOutside(node) {
function handleClick(event) {
if (!node.contains(event.target)) {
node.dispatchEvent(new CustomEvent("outclick"))
}
}
document.addEventListener("click", handleClick, true)
return {
destroy() {
document.removeEventListener("click", handleClick, true)
}
}
}
Menggunakan Action
<script>
import { clickOutside } from "./actions.js"
let showMenu = false
</script>
{#if showMenu}
<div use:clickOutside on:outclick={() => showMenu = false}>
Menu content
</div>
{/if}
Action dengan Parameter
<div use:tooltip={"Teks tooltip"}>Hover saya</div>
Action menerima parameter dan bisa return update() untuk merespons perubahan parameter.