动作是一系列元素层级的生命周期函数，它们在以下场景中会很有用：
- 与第三方库进行接口对接
- 延迟加载图像
- 工具提示（tooltips）
- 添加自定义的事件处理器
在本例中，你可以在 canvas 上涂涂画画，通过菜单更换画笔颜色和大小。但是如果你打开菜单后使用 Tab 键在选项间切换，你会发现焦点并没有被窗口 捕获。
我们可以使用动作来解决这一点。从 actions.js 中导入 trapFocus……
App.svelte
<script>
import Canvas from './Canvas.svelte';
import { trapFocus } from './actions.js';
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet', 'white', 'black'];
let selected = colors[0];
let size = 10;
let showMenu = true;
</script>……然后使用 use: 标志将其添加到菜单中：
App.svelte
<div class="menu" use:trapFocus>让我们看一看 actions.js 中的这个 trapFocus 函数。一个动作函数接收一个 node 参数，也就是本例中的 <div class="menu">，当这个节点被初始化（mount）到 DOM 的时候，该动作函数被调用，然后返回一个包含 destroy 方法的动作对象。
首先，我们需要添加一个事件监听器来截获 Tab 按下事件：
actions.js
focusable()[0]?.focus();
node.addEventListener('keydown', handleKeydown);然后我们需要在节点被销毁时作一些清理工作：移除事件监听器，然后把焦点恢复到元素初始化之前的地方：
actions.js
focusable()[0]?.focus();
node.addEventListener('keydown', handleKeydown);
return {
destroy() {
node.removeEventListener('keydown', handleKeydown);
previous?.focus();
}
};现在，当你打开菜单的时候，就可以使用 Tab 键切换选项了。
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<script>
import Canvas from './Canvas.svelte';
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet', 'white', 'black'];
let selected = colors[0];
let size = 10;
let showMenu = true;
</script>
<div class="container">
<Canvas color={selected} size={size} /> {#if showMenu}<div
class="modal-background"
on:click|self={() => showMenu = false} on:keydown={(e) => {if (e.key === 'Escape') showMenu = false;
}}
>
<div class="menu">
<div class="colors">
{#each colors as color}<button
class="color"
aria-label={color} aria-current={selected === color} style="--color: {color}" on:click={() => {selected = color;
}}
></button>
{/each}</div>
<label>
small
<input type="range" bind:value={size} min="1" max="50" />large
</label>
</div>
</div>
{/if}<div class="controls">
<button class="show-menu" on:click={() => showMenu = !showMenu}> {showMenu ? 'close' : 'menu'}</button>
</div>
</div>
<style>
.container {position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.controls {position: absolute;
left: 0;
top: 0;
padding: 1em;
}
.show-menu {width: 5em;
}
.modal-background {position: fixed;
display: flex;
justify-content: center;
align-items: center;
left: 0;
top: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(20px);
}
.menu {position: relative;
background: var(--bg-2);
width: calc(100% - 2em);
max-width: 28em;
padding: 1em 1em 0.5em 1em;
border-radius: 1em;
box-sizing: border-box;
user-select: none;
}
.colors {display: grid;
align-items: center;
grid-template-columns: repeat(9, 1fr);
grid-gap: 0.5em;
}
.color {aspect-ratio: 1;
border-radius: 50%;
background: var(--color, #fff);
transform: none;
filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
transition: all 0.1s;
}
.color[aria-current="true"] {transform: translate(1px, 1px);
filter: none;
box-shadow: inset 3px 3px 4px rgba(0,0,0,0.2);
}
.menu label {display: flex;
width: 100%;
margin: 1em 0 0 0;
}
.menu input {flex: 1;
}
</style>