Svelte参考文档

svelte/action

Action

Action 是创建元素时调用的函数。你可以使用此接口来为 action 定义类型。

下面的例子定义了一个只在 <div> 元素上工作的 action，该 action 可选地接受一个带有默认值的参数：

export const const myAction: Action<HTMLDivElement, {
    someProperty: boolean;
} | undefined>myAction: type Action = /*unresolved*/ anyAction<HTMLDivElement, { someProperty: booleansomeProperty: boolean } | undefined> = (
	node: anynode,
	param: {
    someProperty: boolean;
}param = { someProperty: booleansomeProperty: true }
) => {
	// ...
};

Action<HTMLDivElement> 和 Action<HTMLDivElement, undefined> 都表示该 action 不接受参数。

你可以从函数返回一个包含 update 和 destroy 方法的对象，并定义它具有哪些额外的属性和事件。更多详情请参见 ActionReturn 接口。

interface Action<
	Element = HTMLElement,
	Parameter = undefined,
	Attributes extends Record<string, any> = Record<
		never,
		any
	>
> {…}

<Node extends Element>(
	...args: undefined extends Parameter
		? [node: Node, parameter?: Parameter]
		: [node: Node, parameter: Parameter]
): void | ActionReturn<Parameter, Attributes>;

ActionReturn

action 可以返回一个包含此接口定义的两个属性的对象。这两个属性都是可选的。

update：action 可以有一个参数。当该参数发生变化时，此方法将被调用，紧跟在 Svelte 对标记进行更新之后。ActionReturn 和 ActionReturn<undefined> 都表示该 action 不接受参数。
destroy：在元素被卸载后调用的方法

另外，您可以指定该 action 在应用的元素上启用哪些额外的属性和事件。这仅适用于 TypeScript 类型定义，在运行时没有任何效果。

使用示例：

interface Attributes {
	Attributes.newprop?: string | undefinednewprop?: string;
	'on:event': (e: CustomEvent<boolean>e: interface CustomEvent<T = any>MDN Reference
CustomEvent<boolean>) => void;
}

export function function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes>myAction(node: HTMLElementnode: HTMLElement, parameter: Parameterparameter: type Parameter = /*unresolved*/ anyParameter): type ActionReturn = /*unresolved*/ anyActionReturn<type Parameter = /*unresolved*/ anyParameter, Attributes> {
	// ...
	return {
		update: (updatedParameter: any) => voidupdate: (updatedParameter: anyupdatedParameter) => {...},
		destroy: () => {...}
	};
}

interface ActionReturn<
	Parameter = undefined,
	Attributes extends Record<string, any> = Record<
		never,
		any
	>
> {…}

update?: (parameter: Parameter) => void;

destroy?: () => void;

在 GitHub 编辑此页面

svelte svelte/animate