Actions Svelte — Svelte

Actions (use:) adalah fungsi yang dipanggil saat elemen ditambahkan ke DOM — seperti custom directive. Membuat Action export function clickOutside(node) { funct

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.

Yang akan kamu pelajari