Toast 轻提示

使用 showToast 和 hideToast 函数，而不是通过属性控制 <Toast /> 标签。

您在执行业务过程中，可以随时显示轻提示。虽然这样的设计不是响应式的，但是实际使用时会很方便。

示例

引用 Toast 组件

您需要在 /src/routes/+layout.svelte 文件中引用 Toast 组件。整个项目中 Toast 组件仅需引用一次。

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

  import { Toast } from 'sun-parakeet'

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

{@render children?.()}

<Toast />

基础用法

<Button onclick={() => showToast({ text: '轻提示' })}>轻提示</Button>

图标

<Button onclick={() => showToast({ text: 'Github', icon: 'github' })}
  >带图标</Button
>

更多功能

<Button onclick={() => showToast({ text: '带遮罩', mask: true })}>带遮罩</Button
>
<Button
  onclick={() => showToast({ text: '阻止关闭', mask: true, keepOpen: true })}
  >阻止关闭</Button
>

手动关闭

<Button
  onclick={() =>
    showToast({ text: '不会自动关闭', duration: 0, keepOpen: true })}
  >打开轻提示</Button
>
<Button onclick={() => hideToast()}>关闭轻提示</Button>

倒计时

<script lang="ts">
  let interval: NodeJS.Timeout | null

  function countdown() {
    if (interval) return

    let second = 5

    interval = setInterval(() => {
      second--
      modifyToast({ text: `剩余 ${second} 秒` })

      if (second <= 0) {
        hideToast()
        interval && clearInterval(interval)
        interval = null
      }
    }, 1000)

    showToast({
      duration: 0,
      icon: { name: 'loader', class: 'animate-spin', size: 32 },
      text: `剩余 ${second} 秒`,
      keepOpen: true,
    })
  }
</script>

<Button onclick={countdown}>开始倒计时</Button>

Toast

函数定义

/**
 * 显示轻提示
 * @param option 轻提示配置
 */
async function showToast(option: ShowToastOption): void

/**
 * 关闭轻提示
 * @param key 如果提供 key，则会与 showToast 提供的 key 匹配，如果不一致则不会关闭
 */
async function hideToast(key?: string): void

/**
 * 修改当前轻提示的内容
 * @param option 轻提示配置
 */
function modifyToast(
  option: Pick<ShowToastOption, 'key' | 'icon' | 'text'>
): void

ShowToastOption

属性	说明	类型	默认值
key	给 Toast 定义一个 key，调用 hideToast 时，如果 key 不一致，则不会关闭	string	undefined
text	提示文本	string	undefined
icon	图标。提供 string 类型表示图标名称，详见 Icon 组件。	string | IconOption	undefined
duration	持续时间(毫秒)。默认 1500，0 表示不会自动关闭。	number	1500
mask	是否显示遮罩	boolean	false
keepOpen	阻止点击关闭，并尝试阻止返回关闭。	boolean	false

keepOpen 在 FileFox/微信/企业微信 中执行良好，但是会被新版本 Chrome/Edge 浏览器的默认行为阻止。此时，会使用 window.onbeforeunload 阻止用户返回。