使用
操作是元素挂载时调用的函数。它们使用 use: 指令添加，并且通常会使用 $effect，以便它们可以在元素卸载时重置任何状态。
应用
<script>
/** @type {import('svelte/action').Action} */
function myaction(node) {
// the node has been mounted in the DOM
$effect(() => {
// setup goes here
return () => {
// teardown goes here
};
});
}
</script>
<div use:myaction>...</div><script lang="ts">
import type { Action } from 'svelte/action';
const myaction: Action = (node) => {
// the node has been mounted in the DOM
$effect(() => {
// setup goes here
return () => {
// teardown goes here
};
});
};
</script>
<div use:myaction>...</div>操作可以带参数调用。
应用
<script>
/** @type {import('svelte/action').Action} */
function myaction(node, data) {
// ...
}
</script>
<div use:myaction={data}>...</div><script lang="ts">
import type { Action } from 'svelte/action';
const myaction: Action = (node, data) => {
// ...
};
</script>
<div use:myaction={data}>...</div>操作仅调用一次（但在服务器端渲染期间不会调用）——如果参数发生更改，它将不会再次运行。
旧版模式
在
$effect符文之前，操作可以返回一个包含update和destroy方法的对象，其中update会在参数更改时使用参数的最新值调用。建议使用效果。
类型
Action 接口接收三个可选类型参数——节点类型（如果操作适用于所有内容，则可以为 Element）、参数以及操作创建的任何自定义事件处理程序。
应用
<script>
import { on } from 'svelte/events';
/**
* @type {import('svelte/action').Action<
* HTMLDivElement,
* null,
* {
* onswiperight: (e: CustomEvent) => void;
* onswipeleft: (e: CustomEvent) => void;
* // ...
* }>}
*/
function gestures(node) {
$effect(() => {
// ...
node.dispatchEvent(new CustomEvent('swipeleft'));
// ...
node.dispatchEvent(new CustomEvent('swiperight'));
});
}
</script>
<div
use:gestures
onswipeleft={next}
onswiperight={prev}
>...</div><script lang="ts">
import { on } from 'svelte/events';
import type { Action } from 'svelte/action';
const gestures: Action<
HTMLDivElement,
null,
{
onswiperight: (e: CustomEvent) => void;
onswipeleft: (e: CustomEvent) => void = (node) => {
$effect(() => {
// ...
node.dispatchEvent(new CustomEvent('swipeleft'));
// ...
node.dispatchEvent(new CustomEvent('swiperight'));
});
};
</script>
<div
use:gestures
onswipeleft={next}
onswiperight={prev}
>...</div>