У меня есть боковая панель со складными разделами, в которых используются такие слоты:
<Sidebar> // creates writable context
<Searchbar /> // updates context
<Collapsible>
<MyControl label = "hello" /> // subscribes to context to check if label matches search
<MyControl label = "world" /> // subscribes to context to check if label matches search
</Collapsible>
</Sidebar>
Sidebar
создает записываемый контекст, который Searchbar
обновляется и MyControl
подписывается, чтобы проверить, выполняется ли по нему поиск. Моя проблема в том, что мои элементы управления находятся в блоке {#if}
, они не монтируются до тех пор, пока Collapsible
не будет сначала расширен всего 1 раз, а если они не монтируются, то они никогда не подписываются на контекст, и мой поиск не работает. Как только раздел «Складной» разворачивается всего 1 раз (впоследствии его можно свернуть), моя панель поиска работает.
Складной.Svelte:
{#if expanded}
<div transition:slide>
<slot />
</div>
{/if}
По сути, мой вопрос: могу ли я заставить свой <slot />
смонтироваться? или есть какой-то другой способ решить эту проблему?
да, это вариант, я только что отредактировал свой вопрос, мой <slot />
завернут в div со свойством transition:slide
. насколько я знаю, это работает только с условным рендерингом, и я старался избегать использования для этого CSS, поскольку в svelte есть хорошая встроенная анимация, поэтому мне было любопытно, есть ли другой способ @possum
я решил это сам, используя блок #key и такие переходы входа/выхода:
{#key expanded}
<div
class = {clsx(!expanded && "hidden")}
in:getAnimation = {{fn: slide, cond: expanded}}
out:getAnimation = {{fn: slide, cond: !expanded}}>
<slot />
</div>
{/key}
где getAnimation
это:
const getInAnimation = (node, options) => {
if (options.cond) {
return options.fn(node, options);
}
};
Внимательно прочитав ваш вопрос, на него можно ответить: «Вы можете заставить свой слот смонтироваться, не ставя его в
#if
», потому что вы не добавили никаких уточняющих потребностей. Я предполагаю, что вы хотите, чтобы он был установлен, но не виден, поэтому я бы обернул его чем-то со свойствомdisplay: none
css, контролируемымexpanded
вместо#if
.