· Svelte添加参数_Svelte

Svelte 添加参数

像过渡和动画一样，一个动作可以带一个参数，动作函数将与它所属的元素一起被调用。在这里，我们使用longpress操作，只要用户在给定的持续时间内按下并按住按钮，就会触发同名事件。现在，如果您切换到 longpress.js 文件，您会看到它被硬编码为 500 毫秒。我们可以更改动作函数以接受duration作为第二个参数，并将该duration传递给 setTimeout 调用：export function longpress(node, duration) {

// ...

const handleMousedown = () =&gt; {
    timer = setTimeout(() =&gt; {
        node.dispatchEvent(
            new CustomEvent('longpress')
        );
    }, duration);
};
// ...

}回到 App.svelte，我们可以将duration值传递给操作：<button use:longpress={duration}这几乎可以工作——事件现在只在 2 秒后触发。但是如果你将持续时间向下滑动，它仍然需要两秒钟。要改变它，我们可以在 longpress.js 中添加一个update方法。每当参数更改时都会调用它：return {

update(newDuration) {

duration = newDuration;

// ...

};如果你需要将多个参数传递给一个动作，将它们组合成一个对象，如 use:longpress={{duration, spiciness}}示例代码App.svelte<script>

import { longpress } from './longpress.js';

let pressed = false;let duration = 2000;

</script>

<label>

{duration}ms

</label>

<button use:longpress={duration}

on:longpress="{() => pressed = true}"

on:mouseenter="{() => pressed = false}"

>press and hold</button>

{#if pressed}

<p>congratulations, you pressed and held for {duration}ms</p>

{/if}longpress.jsexport function longpress(node, duration) {

let timer;

const handleMousedown = () =&gt; {
    timer = setTimeout(() =&gt; {
        node.dispatchEvent(
            new CustomEvent('longpress')
        );
    }, duration);
};
const handleMouseup = () =&gt; {
    clearTimeout(timer)
};
node.addEventListener('mousedown', handleMousedown);
node.addEventListener('mouseup', handleMouseup);
return {
    update(newDuration) {
        duration = newDuration;
    },
    destroy() {
        node.removeEventListener('mousedown', handleMousedown);
        node.removeEventListener('mouseup', handleMouseup);
    }};

}