Как я могу вернуть обработанную HTML компонента Svelte? - PullRequest
Новая
       5

Как я могу вернуть обработанную HTML компонента Svelte?

0 голосов
/ 24 января 2020

Мне трудно создать всплывающую подсказку use:action. Мои требования:

  1. Создание всплывающей подсказки с HTML или Компонентом в качестве содержимого
  2. Без необходимости оборачивать компонент в <Tooltip><element></Tooltip>
  3. Hook в готовые библиотеки для гибкости

Пожалуйста, смотрите мой пример кода ниже. Он не работает в REPL из-за зависимостей Tippy. js, но у меня он работает с простым HTML в моем приложении. Вот почему я думаю, что мне следует попытаться визуализировать компонент, который распознает реквизиты, как и любой другой, затем каким-то образом взять его HTML и задействовать его: вызов действия. (см. "content: ' Привет, я работаю! '"). Использовать его так же просто, как и в дни подсказок jQuery.

Ссылка REPL: https://svelte.dev/repl/e8fdf98eb42445e3b791d7c908581a71?version=3.17.3

1 Ответ

1 голос
/ 24 января 2020

Чтобы действительно "вернуть обработанный HTML", вам нужно скомпилировать с generate: 'ssr' опцией и использовать функцию Cmp.render(). Но вы не можете использовать такой компонент в DOM ...

Вы не можете получить содержимое компонента, но вы можете получить HTML любого элемента, используя действие, подобное следующему: 

<script>
const logHtml = el => {
  console.log(el.innerHTML)
}
</script>

<div use:logHtml> ... </div>

Или просто bind:this для элементов: 

<script>
  let el
  $: if (el) console.log(el.innerHTML)
</script>

<div bind:this={el}> ... </div>

В вашем случае, однако, кажется, что вам нужно визуализировать компонент непосредственно в элемент подсказки. Для этого вы можете использовать new MyComponent.

Вот пример действия, визуализирующего пользовательский компонент с tippy.js (см. обновленный REPL ): 

export function tipz(elem, { content, props, ...opts }) {
  let cmp

  const tp = tippy(elem, {
    onCreate() {
      cmp = new content({
        target: instance.popper.querySelector(".tippy-content"),
        props,
      });
    },
    ...opts
  })

  return {
    update(params) {
      // ensure reactivity
      if (cmp) {
        cmp.$set(params.props)
      }
    },
    destroy() {
      tp.destroy();
      if (cmp) {
        // cleanup component
        cmp.$destroy();
      }
    }
  };
}
...