跳至主要内容
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>