在运行等待周期时禁用变量

Question

我创建了一个在获取数据时使用的简单组件，我还想在等待周期为运行时禁用按钮，我可以使用 {disabled = true} 和 {disabled = false} 但这会呈现这些值，还有其他方法吗？

<script>
  import Fa from "@node_modules/svelte-fa/src/fa.svelte"
  import { faSpinner } from "@fortawesome/free-solid-svg-icons"
  export let text = ""
  export let promise
  let className
  let disabled = false
  export {className as class}


</script>
<button
  class={className} disabled={disabled}
>
  {#await promise}
    <Fa icon={faSpinner} class="rotate" />
  {:then}
    { text }
  {/await}
</button>

Answer 1

我稍微简化了你的例子，但试试这样：

<!-- Loader.svelte -->
<script>
    export let promise;
    let disabled = true;
    
    // when promise changes, disable the button again
    $: {
        disabled = true;
        promise.then(() => {
            disabled = false;
        });
    }
</script>

<button {disabled}>
{#await promise }
    Loading...
{:then}
    Loaded
{/await}
</button>

这是该组件的实际演示。

<!-- App.svelte -->
<script>
    import Loader from './Loader.svelte';
    
    let promise;
    initPromise();
    
    function initPromise() {
        promise = new Promise(resolve => setTimeout(resolve, 1000));
    }
</script>

<Loader {promise} />
<button on:click={initPromise}>
    Reset promise
</button>

在 运行 等待周期时禁用变量

Make a variable disabled when it's running await cycle

svelte

在运行等待周期时禁用变量