Loading 加载中

Loading 组件本质上是 Toast 组件的特殊用法。

注意：Loading 提示默认使用了 ShowToastOption.keepOpen: true。此设置会尝试阻止用户点击浏览器返回按钮，或使用返回手势。

示例

引用 Toast 组件

您需要在 /src/routes/+layout.svelte 文件中引用 Toast 组件。

<script lang="ts">
  import '../app.css'

  import { Toast } from 'sun-parakeet'

  let { children } = $props()
</script>

{@render children?.()}

<Toast />

异步请求

使用 showLoading 和 hideLoading 函数，您可以非常便捷地将 Loading 控制与异步传输过程结合。

注意：showLoading 和 hideLoading 必须成对调用

<script lang="ts">
  async function loading(option?: ShowLoadingOption, duration: number = 2000) {
    showLoading(option)

    try {
      await delay(duration)
    } finally {
      hideLoading()
    }
  }
</script>

基础用法

<Button onclick={() => loading()}>提交</Button>

自定义

<Button onclick={() => loading({ text: '提交中...' })}>说明文字</Button>
<Button onclick={() => loading({ text: '提交中...', icon: 'loader' })}
  >自定义图标</Button
>

并行执行

<Button
  onclick={() => {
    Promise.all([
      loading({ text: '加载中...' }, 1000),
      loading({ text: '加载中...' }, 2000),
      loading({ text: '加载中...' }, 3000),
    ])
  }}>加载</Button
>

注意：在上面的代码中，无论哪个异步过程率先完成，Loading 提示都会保持打开状态，直到所有的异步过程都执行完毕。

Loading

函数定义

/**
 * 显示 Loading Toast
 * @param option 配置
 */
async function showLoading(option?: ShowLoadingOption): void

/**
 * 关闭 Loading Toast
 * @param force 强制关闭
 */
function hideLoading(force: boolean = false) void

ShowToastOption

属性	说明	类型	默认值
icon	更改图标。提供 string 类型表示图标名称，详见 Icon 组件。	string | IconOption	默认的加载图标
text	提示文本	string	undefined