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 通知的响应式数组。