https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Svelte는 프론트 엔드 웹 앱 개발을 위한 떠오르는 프론트 엔드 프레임워크입니다.

사용이 간편하고 결과를 빠르게 생성할 수 있습니다.

이 기사에서는 액션을 사용하여 선택한 요소에 수명 주기 후크를 추가하는 방법을 살펴보겠습니다.

행위

작업은 요소 수준 수명 주기 기능입니다. 툴팁과 같은 요소 이벤트를 수신하고 타사 라이브러리와 인터페이스해야 하는 경우에 유용합니다.

예를 들어, 다음과 같이 끌 때 튀어오르는 상자를 만드는 데 사용할 수 있습니다.
pannable.js :

export const pannable = node => {  
  let x;  
  let y; const handleMousedown = event => {  
    x = event.clientX;  
    y = event.clientY; node.dispatchEvent(  
      new CustomEvent("panstart", {  
        detail: { x, y }  
      })  
    ); 
    window.addEventListener("mousemove", handleMousemove);  
    window.addEventListener("mouseup", handleMouseup);  
  }; 

  const handleMousemove = event => {  
    const dx = event.clientX - x;  
    const dy = event.clientY - y;  
    x = event.clientX;  
    y = event.clientY; node.dispatchEvent(  
      new CustomEvent("panmove", {  
        detail: { x, y, dx, dy }  
      })  
    );  
  }; 

  const handleMouseup = event => {  
    x = event.clientX;  
    y = event.clientY; node.dispatchEvent(  
      new CustomEvent("panend", {  
        detail: { x, y }  
      })  
    ); 
    window.removeEventListener("mousemove", handleMousemove);  
    window.removeEventListener("mouseup", handleMouseup);  
  }; 

  node.addEventListener("mousedown", handleMousedown); return {  
    destroy() {  
      node.removeEventListener("mousedown", handleMousedown);  
    }  
  };  
};

App.svelte :

<script>  
  import { spring } from "svelte/motion";  
  import { pannable } from "./pannable.js"; 

  const coords = spring(  
    { x: 0, y: 0 },  
    {  
      stiffness: 0.2,  
      damping: 0.4  
    }  
  ); 

  const handlePanStart = () => {  
    coords.stiffness = coords.damping = 1;  
  }; 

  const handlePanMove = event => {  
    coords.update($coords => ({  
      x: $coords.x + event.detail.dx,  
      y: $coords.y + event.detail.dy  
    }));  
  }; 

  const handlePanEnd = event => {  
    coords.stiffness = 0.2;  
    coords.damping = 0.4;  
    coords.set({ x: 0, y: 0 });  
  };  
</script>

<style>  
  .box {  
    position: absolute;  
    width: 100px;  
    height: 100px;  
    border-radius: 4px;  
    background-color: green;  
    cursor: move;  
  }  
</style>

<div class="box"  
  use:pannable  
  on:panstart={handlePanStart}  
  on:panmove={handlePanMove}  
  on:panend={handlePanEnd}  
  style="transform:  
    translate({$coords.x}px,{$coords.y}px)  
    rotate({$coords.x * 0.2}deg)"  
>
</div>

위의 코드에서 pannable의 이벤트를 수신하는 div를 만들었습니다. pannable 지시문과 함께 use:pannable 작업을 사용합니다.
pannable 함수에는 적용되는 것이 무엇이든 방출하는 모든 사용자 정의 이벤트가 있습니다.
handleMousedown 함수의 pannable 리스너에는 액션이 ​​연결된 DOM 노드인 node가 있고 마우스 위치로 x와 y를 설정합니다. 그런 다음 dispatchEvent를 호출하여 사용자 정의 이벤트를 내보내고, panstart는 x 및 y 좌표를 상위 compone.t로 보냅니다.
handleMousemove 함수에서 node 및 x를 사용하여 상자를 번역하여 상자의 위치를 ​​y 변경하여 마우스 이동을 처리합니다. 그런 다음 사용자 지정panmove 이벤트를 부모에게 전달합니다.

마우스가 이동을 멈추면 handleMouseup 이벤트 핸들러가 호출되어 x 및 y를 마우스 좌표로 설정합니다. 그런 다음 panned 및 x 좌표와 함께 y 이벤트를 전달합니다.

div 상자가 파괴되면 상자가 파괴될 때 node.removeListener 리스너를 제거하기 위해 mousedown를 호출했습니다.
App.svelte 에서 x 에서 보낸 y 및 pannable 좌표를 사용하여 상자의 좌표를 업데이트합니다.

Svelte에 내장된 spring 전환으로 바운스 효과를 추가한 경우. coords 는 spring 에서 반환된 애니메이션 효과입니다. 여기에는 상자에 대한 x 및 y 좌표가 있으며 마우스가 움직일 때 상자의 위치를 ​​업데이트합니다.
panstart , panmove , panned 이벤트가 발생하면 상자의 좌표를 설정합니다.
mousemove가 panstart 이벤트의 방출을 트리거하기 때문에 애니메이션의 강성과 감쇠를 설정합니다.
mousemove는 panmove 이벤트를 발생시켜 상자의 좌표를 변경합니다.

그런 다음 마우스 이동을 멈추고 버튼을 놓으면 panend 이벤트가 트리거되어 handlePanEnd가 호출되어 상자의 좌표를 다시 (0, 0)으로 변경합니다.

div의 style 속성은 동적이며 coords 에 의존하므로 상자는 coords 변경에 따라 이동합니다. 또한 coords 함수로 각도를 사용하여 상자를 회전하므로 회전도 표시됩니다.

따라서 상자를 드래그한 다음 마우스 버튼을 놓으면 바운스 효과가 나타납니다.

결론

Svelte에서 작업은 사용자 지정 이벤트를 내보내는 기능입니다. 요소에 작업을 연결한 다음 해당 사용자 지정 이벤트를 수신하여 원하는 대로 요소를 조작할 수 있습니다.