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

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

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

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

이 기사에서는 매개변수를 작업에 전달하는 방법을 살펴보겠습니다.

매개변수 추가

조치는 인수를 취할 수 있습니다. 즉, 액션이 속한 요소와 함께 호출됩니다.

예를 들어 슬라이더로 변경할 수 있는 지정된 시간 동안 버튼을 클릭하고 누르고 있을 때 메시지를 표시하는 앱을 만들 수 있습니다.

이를 위해 다음 코드를 작성합니다.
longpress.js

export const longpress = (node, duration) => {  
  let timer; 
  const handleMousedown = () => {  
    timer = setTimeout(() => {  
      node.dispatchEvent(new CustomEvent("longpress"));  
    }, duration);  
  }; 

  const handleMouseup = () => {  
    clearTimeout(timer);  
  }; 

  node.addEventListener("mousedown", handleMousedown);  
  node.addEventListener("mouseup", handleMouseup); return {  
    destroy() {  
      node.removeEventListener("mousedown", handleMousedown);  
      node.removeEventListener("mouseup", handleMouseup);  
    },  
    update(newDuration) {  
      duration = newDuration;  
    }  
  };  
};

App.svelte :

<script>  
  import { longpress } from "./longpress.js";
  let pressed = false;  
  let duration = 2000;  
</script>

<label>  
  <input type=range bind:value={duration} max={2000} step={100}>  
  {duration}ms  
</label>

<button use:longpress={duration}  
  on:longpress="{() => pressed = true}"  
  on:mouseenter="{() => pressed = false}"  
>
  press and hold
</button>

{#if pressed}  
  <p>You pressed for {duration}ms</p>  
{/if}

위의 코드에서 longpress를 인수로 사용하는 duration 작업을 만들었습니다.

전달될 때 update를 업데이트하기 위해 반환하는 객체에 duration 메서드가 있습니다.

그런 다음 마우스를 클릭하면 mousedown 이벤트가 발생하고 handleMousedown가 호출됩니다.
longpress 를 통해 지정된 duration 다음에 사용자 지정setTimeout 이벤트를 전달합니다.

그런 다음 마우스 버튼을 놓으면 handleMouseup가 호출되고 나서 clearTimeout가 호출됩니다.

그런 다음 App.svelte 에는 메시지를 보기 위해 길게 누르는 버튼이 있습니다. 메시지가 표시될 때까지 길게 누르기가 지속되는 시간을 조정하는 슬라이더가 있습니다.

이것은 longpress 지시문을 사용하여 longpress 작업에 첨부된 버튼에서 발생하는 use:longpress 이벤트를 수신했기 때문에 작동합니다.

처음에 버튼 위로 마우스를 가져가면 mouseenter 이벤트가 발생하고 pressed 가 false 로 설정됩니다.
longpress 이벤트가 longprss 에서 발생하고 버튼을 충분히 오래 누르고 있으면 pressed 가 true 로 설정됩니다.

그러면 pressed 가 true 일 때 메시지가 표시됩니다.

여러 인수를 전달해야 하는 경우 다음과 같은 여러 속성을 가진 하나의 객체를 전달합니다.

use:longpress={{duration, foo}}

결론

우리는 하나의 인수를 행동으로 전달할 수 있습니다. 이렇게 하면 우리가 원하는 방식으로 행동을 조정할 수 있습니다.
update 함수는 인수가 업데이트될 때 값을 업데이트하는 데 필요합니다.