Svelte 添加參數(shù)

像過渡和動畫一樣，一個動作可以帶一個參數(shù)，動作函數(shù)將與它所屬的元素一起被調(diào)用。

在這里，我們使用?longpress?操作，只要用戶在給定的持續(xù)時間內(nèi)按下并按住按鈕，就會觸發(fā)同名事件。現(xiàn)在，如果您切換到 ?longpress.js? 文件，您會看到它被硬編碼為 500 毫秒。

我們可以更改動作函數(shù)以接受?duration?作為第二個參數(shù)，并將該?duration?傳遞給 ?setTimeout? 調(diào)用：

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

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

	// ...
}

回到 ?App.svelte?，我們可以將?duration?值傳遞給操作：

<button use:longpress={duration}

這幾乎可以工作——事件現(xiàn)在只在 2 秒后觸發(fā)。但是如果你將持續(xù)時間向下滑動，它仍然需要兩秒鐘。

要改變它，我們可以在 ?longpress.js? 中添加一個?update?方法。每當參數(shù)更改時都會調(diào)用它：

return {
	update(newDuration) {
		duration = newDuration;
	},
	// ...
};

如果你需要將多個參數(shù)傳遞給一個動作，將它們組合成一個對象，如 ?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);
		}
	};
}