Svelte 添加参数

像过渡和动画一样，一个动作可以带一个参数，动作函数将与它所属的元素一起被调用。

在这里，我们使用​longpress​操作，只要用户在给定的持续时间内按下并按住按钮，就会触发同名事件。现在，如果您切换到 ​longpress.js​ 文件，您会看到它被硬编码为 500 毫秒。

我们可以更改动作函数以接受​duration​作为第二个参数，并将该​duration​传递给 ​setTimeout​ 调用：

export function longpress(node, duration) {
	// ...

	const handleMousedown = () => {
		timer = setTimeout(() => {
			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>
	<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>congratulations, you pressed and held for {duration}ms</p>
{/if}

• longpress.js

export function 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 {
		update(newDuration) {
			duration = newDuration;
		},
		destroy() {
			node.removeEventListener('mousedown', handleMousedown);
			node.removeEventListener('mouseup', handleMouseup);
		}
	};
}