Svelte参考

svelte/attachments

import { function createAttachmentKey(): symbolCreates an object key that will be recognised as an attachment when the object is spread onto an element,
as a programmatic alternative to using {@attach ...}. This can be useful for library authors, though
is generally not needed when building an app.
&#x3C;script>
	import { createAttachmentKey } from 'svelte/attachments';

	const props = {
		class: 'cool',
		onclick: () => alert('clicked'),
		[createAttachmentKey()]: (node) => {
			node.textContent = 'attached!';
		}
	};
&#x3C;/script>

&#x3C;button {...props}>click me&#x3C;/button>
@since5.29createAttachmentKey, function fromAction<E extends EventTarget, T extends unknown>(action: Action<E, T, Record<never, any>> | ((element: E, arg: T) => void | ActionReturn<T, Record<never, any>>), fn: () => T): Attachment<E> (+1 overload)Converts an action into an attachment keeping the same behavior.
It’s useful if you want to start using attachments on components but you have actions provided by a library.
Note that the second argument, if provided, must be a function that returns the argument to the
action function, not the argument itself.
&#x3C;!-- with an action -->
&#x3C;div use:foo={bar}>...&#x3C;/div>

&#x3C;!-- with an attachment -->
&#x3C;div {@attach fromAction(foo, () => bar)}>...&#x3C;/div>fromAction } from 'svelte/attachments';

createAttachmentKey

自 5.29 版本起可用

¥Available since 5.29

创建一个对象键，当对象展开到元素上时，该键将被识别为附件，这是使用 {@attach ...} 的编程替代方案。这对库作者来说很有用，但在构建应用时通常不需要。

¥Creates an object key that will be recognised as an attachment when the object is spread onto an element, as a programmatic alternative to using {@attach ...}. This can be useful for library authors, though is generally not needed when building an app.

<script>
	import { createAttachmentKey } from 'svelte/attachments';

	const props = {
		class: 'cool',
		onclick: () => alert('clicked'),
		[createAttachmentKey()]: (node) => {
			node.textContent = 'attached!';
		}
	};
</script>

<button {...props}>click me</button>

function createAttachmentKey(): symbol;

fromAction

将 action 转换为 attachment，同时保持相同的行为。如果你想在组件上使用附件，但你拥有库提供的操作，这将非常有用。

¥Converts an action into an attachment keeping the same behavior. It’s useful if you want to start using attachments on components but you have actions provided by a library.

请注意，第二个参数（如果提供）必须是将参数返回给操作函数的函数，而不是参数本身。

¥Note that the second argument, if provided, must be a function that returns the argument to the action function, not the argument itself.

<!-- with an action -->
<div use:foo={bar}>...</div>

<!-- with an attachment -->
<div {@attach fromAction(foo, () => bar)}>...</div>

function fromAction<
	E extends EventTarget,
	T extends unknown
>(
	action:
		| Action<E, T>
		| ((element: E, arg: T) => void | ActionReturn<T>),
	fn: () => T
): Attachment<E>;

function fromAction<E extends EventTarget>(
	action:
		| Action<E, void>
		| ((element: E) => void | ActionReturn<void>)
): Attachment<E>;

附件(Attachment)

¥Attachment

attachment 是一个函数，在元素挂载到 DOM 时运行，并可选地返回一个函数，该函数在元素稍后被移除时被调用。

¥An attachment is a function that runs when an element is mounted to the DOM, and optionally returns a function that is called when the element is later removed.

它可以通过 {@attach ...} 标签附加到元素，或者通过展开包含使用 createAttachmentKey 创建的属性的对象来附加。

¥It can be attached to an element with an {@attach ...} tag, or by spreading an object containing a property created with createAttachmentKey.

interface Attachment<T extends EventTarget = Element> {…}

(element: T): void | (() => void);

svelte/animate svelte/compiler