跳到主要內容
基本 Svelte 動作 加入參數

如同轉換和動畫，動作可以接收一個參數，該參數將與它所屬的元素一起被呼叫。

在這個練習中，我們希望使用 Tippy.js 函式庫為 <button> 加入工具提示。動作已經與 use:tooltip 連接，但如果您將滑鼠懸停在按鈕上方（或使用鍵盤將焦點放在按鈕上），工具提示將不包含任何內容。

首先，動作需要接受一個函式，該函式返回一些要傳遞給 Tippy 的選項

App
function tooltip(node, fn) {
	$effect(() => {
		const tooltip = tippy(node, fn());

		return tooltip.destroy;
	});
}

我們傳遞的是函式，而不是選項本身，因為當選項變更時，tooltip 函式不會重新執行。

然後，我們需要將選項傳遞到動作中

App
<button use:tooltip={() => ({ content })}>
	Hover me
</button>

在 Svelte 4 中，動作會回傳一個帶有 update 和 destroy 方法的物件。這仍然有效，但我們建議改用 $effect，因為它提供了更大的彈性和粒度。

在 GitHub 上編輯此頁面

上一頁 下一頁
use 指令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script>
	import tippy from 'tippy.js';
 
	let content = $state('Hello!');
 
	function tooltip(node) {
		$effect(() => {
			const tooltip = tippy(node);
 
			return tooltip.destroy;
		});
	}
</script>
 
<input bind:value={content} />
 
<button use:tooltip>
	Hover me
</button>
 
<style>
	:global {
		[data-tippy-root] {
			--bg: #666;
			background-color: var(--bg);
			color: white;
			border-radius: 0.2rem;
			padding: 0.2rem 0.6rem;
			filter: drop-shadow(1px 1px 3px rgb(0 0 0 / 0.1));
 
			* {
				transition: none;
			}
		}
 
		[data-tippy-root]::before {
			--size: 0.4rem;
			content: '';
			position: absolute;
			left: calc(50% - var(--size));
			top: calc(-2 * var(--size) + 1px);
			border: var(--size) solid transparent;
			border-bottom-color: var(--bg);
		}
	}
</style>