如何編寫“延遲”的 svelte 組件？

Question

我正在嘗試編寫一個在指定時間內隱藏其插槽的 Svelte 組件。

例如，下一行應在 3 秒內隱藏該段落

<Delayed mili_time={3000}> <p>some text</p> <Delayed>

我的嘗試沒有奏效，也沒有顯示任何內容（盡管沒有出現錯誤，但顯示了日志）我很樂意收到一些幫助、提示或指導。

嘗試：

<script>

import { onMount} from "svelte";

  export let mili_time = 500;
  let shown = false;


  onMount(
    setTimeout(() => {
      console.log("delayed!");
      shown = true;
    }, mili_time)
  );
</script>

{#if shown}
<slot />
{/if}


<style></style>

提前感謝任何閱讀或回答直到問題結束的人^^

Answer 1

您的onMount格式錯誤，當您有一個function 調用時，它需要一個function作為參數。

正確的格式是：

onMount(() => setTimeout(....)

這樣function () => setTimeout(...)將被執行。

在您的代碼中，調用了 setTimeout function 並將 function 的返回值（對超時的引用）傳遞到onMount

Answer 2

使用 100% 原生組件：

 <delayed-content delay="1000" hidden> <h1>Hello World</h1> </delayed-content> <script> customElements.define("delayed-content", class extends HTMLElement { connectedCallback() { setTimeout(() => { this.removeAttribute("hidden"); }, Number(this.getAttribute("delay"))); } }); </script>

Answer 3

您可以在渲染后設置超時並使用 CSS class 隱藏元素，如下所示：

<script>
  import { onMount } from 'svelte';

  export let timeout = 3000;
  export let hidden = false;

  onMount(() => {
    setTimeout(() => {
      hidden = true;
    }, timeout);
  });
</script>

<div class:hidden>
  <p>Some cool content here</p>
</div>

<style type="text/css">
  .hidden {
    display: none;
  }
</style>