O Acțiune Svelte (Action) este o funcție simplă atașată direct unui element HTML la montare prin directiva use:numeActiune. Ea oferă acces direct la nodul DOM nativ, permițând integrarea oricărei biblioteci JavaScript externe (cum ar fi Chart.js, Tippy.js sau SortableJS) într-un mod modular și curat.
Implementarea unei acțiuni clasice: ‘clickOutside’
// clickOutside.ts
export function clickOutside(node: HTMLElement, onClicInAfara: () => void) {
const ascultator = (event: MouseEvent) => {
// Verificăm dacă click-ul a avut loc în afara nodului:
if (!node.contains(event.target as Node)) {
onClicInAfara();
}
};
document.addEventListener('click', ascultator, true);
return {
// Se apelează automat când elementul este eliminat din DOM:
destroy() {
document.removeEventListener('click', ascultator, true);
}
};
}Utilizarea acțiunii într-o componentă modală
<script lang="ts">
import { clickOutside } from './clickOutside';
let esteDeschis = $state(true);
</script>
{#if esteDeschis}
<div class="modal" use:clickOutside={() => (esteDeschis = false)}>
<h3>Fereastră Dialog</h3>
<p>Un click oriunde în afara acestui chenar mă va închide automat!</p>
</div>
{/if}
Întrebări & Exemple de Cod:
Directiva use:action în Svelte: Atașarea de Comportamente Personalizate pe Elemente DOMAi o nelămurire despre utilizarea comenzii
Directiva use:action în Svelte: Atașarea de Comportamente Personalizate pe Elemente DOMsau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.