useToast
一个用于在应用程序中显示 Toast 通知提示的组合式函数。
用法
使用自动导入的 useToast 组合式函数来显示 Toast 通知提示。
<script setup lang="ts">
const toast = useToast()
</script>
useToast组合式函数使用 Nuxt 的useState来管理 Toast 状态，确保应用程序中的响应性。- 一次最多显示 5 个 Toast。当添加新的 Toast 超过此限制时，最旧的 Toast 将自动移除。
- 移除 Toast 时，会在实际从状态中移除前有 200 毫秒的延迟，以便进行退出动画。
API
add(toast: Partial<Toast>): Toast
添加新的 Toast 通知。
- 参数
toast：一个部分Toast对象，具有以下属性id(可选)：Toast 的唯一标识符。如果未提供，将使用时间戳。open(可选)：Toast 是否打开。默认为true。- 来自
Toast接口的其他属性。
- 返回：已添加的完整
Toast对象。
<script setup lang="ts">
const toast = useToast()
function showToast() {
toast.add({
title: 'Success',
description: 'Your action was completed successfully.',
color: 'success'
})
}
</script>
update(id: string | number, toast: Partial<Toast>)
更新现有的 Toast 通知。
- 参数
id：要更新的 Toast 的唯一标识符。toast：一个部分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(id: string | number)
移除 Toast 通知。
- 参数
id：要移除的 Toast 的唯一标识符。
<script setup lang="ts">
const toast = useToast()
function removeToast(id: string | number) {
toast.remove(id)
}
</script>
clear()
移除所有 Toast 通知。
<script setup lang="ts">
const toast = useToast()
function clearAllToasts() {
toast.clear()
}
</script>
toasts
- 类型：
Ref<Toast[]> - 描述：一个包含所有当前 Toast 通知提示的响应式数组。