useToast

一个用于在您的应用程序中显示吐司通知的组合函数。

用法

使用自动导入的 useToast 组合函数来显示 Toast 通知。

<script setup lang="ts">
const toast = useToast()
</script>
  • useToast 组合函数使用 Nuxt 的 useState 来管理吐司状态，确保在整个应用程序中的响应性。
  • 一次最多显示 5 条吐司。当添加新的吐司会导致超出此限制时，最旧的吐司将自动移除。
  • 移除吐司时，在实际从状态中移除之前会有 200 毫秒的延迟，以便进行退出动画。
请确保使用 App 组件包装您的应用程序，该组件使用了我们的Toaster组件，该组件使用了ToastProvider组件（来自 Reka UI）。
在 Toast 组件文档中了解如何自定义吐司的外观和行为。

API

useToast()

useToast 组合函数提供了用于全局管理吐司通知的方法。

add()

add(toast: Partial<Toast>): Toast

添加一个新的吐司通知。

参数

toast
Partial<Toast> required
一个具有以下属性的 Toast 对象的局部表示。

Returns: 添加的完整 Toast 对象。

<script setup lang="ts">
const toast = useToast()

function showToast() {
  toast.add({
    title: 'Success',
    description: 'Your action was completed successfully.',
    color: 'success'
  })
}
</script>

update()

update(id: string | number, toast: Partial<Toast>): void

更新一个现有的吐司通知。

参数

id
string | number required
要更新的吐司的唯一标识符。
toast
Partial<Toast> required
一个具有要更新属性的 Toast 对象的局部表示。
<script setup lang="ts">
const toast = useToast()

function updateToast(id: string | number) {
  toast.update(id, {
    title: 'Updated Toast',
    description: 'This toast has been updated.'
  })
}
</script>

remove()

remove(id: string | number): void

移除一个吐司通知。

参数

id
string | number required
要移除的吐司的唯一标识符。
<script setup lang="ts">
const toast = useToast()

function removeToast(id: string | number) {
  toast.remove(id)
}
</script>

clear()

clear(): void

移除所有吐司通知。

<script setup lang="ts">
const toast = useToast()

function clearAllToasts() {
  toast.clear()
}
</script>

toasts

toasts: Ref<Toast[]>

  • Type: Ref<Toast[]>
  • Description: 包含所有当前吐司通知的响应式数组。

useOverlay

一个用于以编程方式控制叠加层的组合函数。