Toast

一条简洁的消息，向用户提供信息或反馈。

用法

使用 useToast 可组合函数在你的应用中显示消息通知。

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

function addToCalendar() {
  const eventDate = new Date(Date.now() + Math.random() * 31536000000)
  const formattedDate = eventDate.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric'
  })

  toast.add({
    title: 'Event added to calendar',
    description: `This event is scheduled for ${formattedDate}.`,
    icon: 'i-lucide-calendar-days'
  })
}
</script>

<template>
  <UButton
    label="Add to calendar"
    color="neutral"
    variant="outline"
    icon="i-lucide-plus"
    @click="addToCalendar"
  />
</template>

请确保你的应用被 App 组件包裹，该组件使用了我们的消息通知容器组件，该组件使用了ToastProvider组件（来自 Reka UI）。

你可以查看 App 组件的 toaster 属性，了解如何全局配置消息通知容器。

标题

向 toast.add 方法传递 title 字段以显示标题。

title

<script setup lang="ts">
const props = defineProps<{
  title: string
}>()

const toast = useToast()

function showToast() {
  toast.add(props)
}
</script>

<template>
  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>

描述

向 toast.add 方法传递 description 字段以显示描述。

title

description

<script setup lang="ts">
const props = defineProps<{
  title: string
  description: string
}>()

const toast = useToast()

function showToast() {
  toast.add(props)
}
</script>

<template>
  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>

Icon

向 toast.add 方法传递 icon 字段以显示图标。

图标

<script setup lang="ts">
const props = defineProps<{
  icon: string
}>()

const toast = useToast()

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    description: 'There was a problem with your request.',
    icon: props.icon
  })
}
</script>

<template>
  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>

Avatar

向 toast.add 方法传递 avatar 字段以显示头像。

avatar.src

<script setup lang="ts">
import type { AvatarProps } from '@nuxt/ui'

const props = defineProps<{
  avatar: AvatarProps
}>()

const toast = useToast()

function showToast() {
  toast.add({
    title: 'User invited',
    description: 'benjamincanac was invited to the team.',
    avatar: props.avatar
  })
}
</script>

<template>
  <UButton label="Invite user" color="neutral" variant="outline" @click="showToast" />
</template>

颜色

向 toast.add 方法传递 color 字段以更改消息通知的颜色。

color

<script setup lang="ts">
import type { ToastProps } from '@nuxt/ui'

const props = defineProps<{
  color: ToastProps['color']
}>()

const toast = useToast()

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    description: 'There was a problem with your request.',
    icon: 'i-lucide-wifi',
    color: props.color
  })
}
</script>

<template>
  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>

关闭

传递 close 字段以自定义或隐藏关闭按钮（值为 false 时）。

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

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    description: 'There was a problem with your request.',
    icon: 'i-lucide-wifi',
    close: {
      color: 'primary',
      variant: 'outline',
      class: 'rounded-full'
    }
  })
}
</script>

<template>
  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>

关闭图标

传递 closeIcon 字段以自定义关闭按钮的图标。默认为 i-lucide-x。

closeIcon

<script setup lang="ts">
const props = defineProps<{
  closeIcon: string
}>()

const toast = useToast()

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    description: 'There was a problem with your request.',
    closeIcon: props.closeIcon
  })
}
</script>

<template>
  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>

你可以在 app.config.ts 中的 ui.icons.close 键下全局自定义此图标。

你可以在 vite.config.ts 中的 ui.icons.close 键下全局自定义此图标。

操作

传递 actions 字段以向消息通知添加一些按钮操作。

description

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

const props = defineProps<{
  description: string
}>()

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    description: props.description,
    actions: [{
      icon: 'i-lucide-refresh-cw',
      label: 'Retry',
      color: 'neutral',
      variant: 'outline',
      onClick: (e) => {
        e?.stopPropagation()
      }
    }]
  })
}
</script>

<template>
  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>

Progress

传递 progress 字段以自定义或隐藏进度条（值为 false 时）。

进度条默认继承消息通知的颜色，但你可以使用 progress.color 字段覆盖它。

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

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    description: 'There was a problem with your request.',
    icon: 'i-lucide-wifi',
    progress: false
  })
}
</script>

<template>
  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>

Orientation

向 toast.add 方法传递 orientation 字段以更改消息通知的方向。

orientation

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

const props = defineProps<{
  orientation: 'horizontal' | 'vertical'
}>()

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    orientation: props.orientation,
    actions: [{
      icon: 'i-lucide-refresh-cw',
      label: 'Retry',
      color: 'neutral',
      variant: 'outline',
      onClick: (e) => {
        e?.stopPropagation()
      }
    }]
  })
}
</script>

<template>
  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>

示例

Nuxt UI 提供了一个 App 组件，用于包装你的应用，提供全局配置。

更改全局位置

更改 App 组件上的 toaster.position 属性以更改消息通知的位置。

app.vue

<script setup lang="ts">
const toaster = { position: 'bottom-right' }
</script>

<template>
  <UApp :toaster="toaster">
    <NuxtPage />
  </UApp>
</template>

toaster.position

在此示例中，我们使用 AppConfig 全局配置 Toaster 组件的 position 属性。

更改全局持续时间

更改 App 组件上的 toaster.duration 属性以更改消息通知的持续时间。

app.vue

<script setup lang="ts">
const toaster = { duration: 5000 }
</script>

<template>
  <UApp :toaster="toaster">
    <NuxtPage />
  </UApp>
</template>

toaster.duration

在此示例中，我们使用 AppConfig 全局配置 Toaster 组件的 duration 属性。

更改全局最大值 4.1+

更改 App 组件上的 toaster.max 属性以更改同时显示的消息通知的最大数量。

app.vue

<script setup lang="ts">
const toaster = { max: 3 }
</script>

<template>
  <UApp :toaster="toaster">
    <NuxtPage />
  </UApp>
</template>

toaster.max

在此示例中，我们使用 AppConfig 全局配置 Toaster 组件的 max 属性。

堆叠消息通知

将 App 组件上的 toaster.expand 属性设置为 false 以显示堆叠消息通知（灵感来自Sonner).

app.vue

<script setup lang="ts">
const toaster = { expand: true }
</script>

<template>
  <UApp :toaster="toaster">
    <NuxtPage />
  </UApp>
</template>

你可以将鼠标悬停在消息通知上以展开它们。这也会暂停消息通知的计时器。

toaster.expand

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

function addToCalendar() {
  const eventDate = new Date(Date.now() + Math.random() * 31536000000)
  const formattedDate = eventDate.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric'
  })

  toast.add({
    title: 'Event added to calendar',
    description: `This event is scheduled for ${formattedDate}.`,
    icon: 'i-lucide-calendar-days'
  })
}
</script>

<template>
  <UButton
    label="Add to calendar"
    color="neutral"
    variant="outline"
    icon="i-lucide-plus"
    @click="addToCalendar"
  />
</template>

在此示例中，我们使用 AppConfig 全局配置 Toaster 组件的 expand 属性。

API

属性

属性	默认值	类型
`as`	`'li'`	`any` 此组件应渲染为的元素或组件。
`title`		`string \| VNode<RendererNode, RendererElement, { [key: string]: any; }> \| (): VNode<RendererNode, RendererElement, { [key: string]: any; }>`
`description`		`string \| VNode<RendererNode, RendererElement, { [key: string]: any; }> \| (): VNode<RendererNode, RendererElement, { [key: string]: any; }>`
`图标`		`any`
`avatar`		`AvatarProps`
`color`	`'primary'`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
`orientation`	`'vertical'`	`"vertical" \| "horizontal"` 内容和操作之间的方向。
`close`	`true`	`boolean \| Omit<ButtonProps, LinkPropsKeys>` 显示一个关闭按钮以消除消息通知。`{ size: 'md', color: 'neutral', variant: 'link' }`
`closeIcon`	`appConfig.ui.icons.close`	`any` 关闭按钮中显示的图标。
`actions`		`ButtonProps[]` 显示操作列表当方向为 `vertical` 时，位于标题和描述下方当方向为 `horizontal` 时，位于关闭按钮旁边`{ size: 'xs' }`
`进度`	`true`	`boolean \| Pick<ProgressProps, "color" \| "ui">` 显示一个进度条，显示消息通知的剩余持续时间。`{ size: 'sm' }`
`defaultOpen`		`boolean` 对话框初始渲染时的打开状态。当您不需要控制其打开状态时使用。
`open`		`boolean` 对话框的受控打开状态。可以绑定为 `v-model:open`。
`type`		`"foreground" \| "background"` 控制消息通知的敏感度以用于可访问性目的。对于用户操作产生消息通知，选择 `foreground`。由后台任务生成的消息通知应使用 `background`。
`持续时间`		`number` 消息通知应保持可见的毫秒数。覆盖提供给 `ToastProvider` 的值。
`ui`		`{ root?: ClassNameValue; wrapper?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; avatarSize?: ClassNameValue; actions?: ClassNameValue; progress?: ClassNameValue; close?: ClassNameValue; }`

插槽

插槽	类型
`前置`	`{ ui: object; }`
`title`	`{}`
`description`	`{}`
`actions`	`{}`
`close`	`{ ui: object; }`

事件

事件	类型
`暂停`	`[]`
`escapeKeyDown`	`[event: KeyboardEvent]`
`恢复`	`[]`
`swipeStart`	`[event: SwipeEvent]`
`swipeMove`	`[event: SwipeEvent]`
`swipeCancel`	`[event: SwipeEvent]`
`swipeEnd`	`[event: SwipeEvent]`
`update:open`	`[value: boolean]`

可访问属性

通过模板引用访问组件时，您可以使用以下内容：

名称	类型
`height`	`Ref<number>`

主题

app.config.ts

export default defineAppConfig({
  ui: {
    toast: {
      slots: {
        root: 'relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none',
        wrapper: 'w-0 flex-1 flex flex-col',
        title: 'text-sm font-medium text-highlighted',
        description: 'text-sm text-muted',
        icon: 'shrink-0 size-5',
        avatar: 'shrink-0',
        avatarSize: '2xl',
        actions: 'flex gap-1.5 shrink-0',
        progress: 'absolute inset-x-0 bottom-0',
        close: 'p-0'
      },
      variants: {
        color: {
          primary: {
            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
            icon: 'text-primary'
          },
          secondary: {
            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary',
            icon: 'text-secondary'
          },
          success: {
            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success',
            icon: 'text-success'
          },
          info: {
            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info',
            icon: 'text-info'
          },
          warning: {
            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning',
            icon: 'text-warning'
          },
          error: {
            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error',
            icon: 'text-error'
          },
          neutral: {
            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted',
            icon: 'text-highlighted'
          }
        },
        orientation: {
          horizontal: {
            root: 'items-center',
            actions: 'items-center'
          },
          vertical: {
            root: 'items-start',
            actions: 'items-start mt-2.5'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        }
      },
      defaultVariants: {
        color: 'primary'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        toast: {
          slots: {
            root: 'relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none',
            wrapper: 'w-0 flex-1 flex flex-col',
            title: 'text-sm font-medium text-highlighted',
            description: 'text-sm text-muted',
            icon: 'shrink-0 size-5',
            avatar: 'shrink-0',
            avatarSize: '2xl',
            actions: 'flex gap-1.5 shrink-0',
            progress: 'absolute inset-x-0 bottom-0',
            close: 'p-0'
          },
          variants: {
            color: {
              primary: {
                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
                icon: 'text-primary'
              },
              secondary: {
                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary',
                icon: 'text-secondary'
              },
              success: {
                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success',
                icon: 'text-success'
              },
              info: {
                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info',
                icon: 'text-info'
              },
              warning: {
                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning',
                icon: 'text-warning'
              },
              error: {
                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error',
                icon: 'text-error'
              },
              neutral: {
                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted',
                icon: 'text-highlighted'
              }
            },
            orientation: {
              horizontal: {
                root: 'items-center',
                actions: 'items-center'
              },
              vertical: {
                root: 'items-start',
                actions: 'items-start mt-2.5'
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            }
          },
          defaultVariants: {
            color: 'primary'
          }
        }
      }
    })
  ]
})

更新日志

184ea— chore: 减少类型冗余，通过省略操作按钮中的链接属性

dd81d— feat: 添加 data-slot 属性 (#5447)

fce2d— 修复！：一致的暴露引用 (#5385)

63c0a— feat: 在使用的 slot prop 中暴露 ui (#5207)

61b60— 功能：允许传递组件而不是名称 (#4766)

5cb65— 特性：导入 @nuxt/ui-pro 组件

a8af8— fix: 添加进度条 ui 属性的类型 (#4677)

ec569— feat: 使用 Progress 组件实现进度条

1d052— fix: 仅在打开时显示进度条

be41a— 修复：移除按钮默认md尺寸 (#4357)

3bf5a— fix: 在下一个 tick 计算高度

92632— feat: 添加 progress 属性以隐藏进度条 (#4125)

e6e51— fix：class 应该优先于 ui 属性

50863— fix: 使用插槽时显示操作

39c86— fix：@nuxt/module-builder 升级后重构类型（#3855)

b9983— 修复：改进泛型类型 (#3331)

f4c41— 修复：防止不必要的 close 实例化

Slideover

从屏幕任意一侧滑入的对话框。

Tooltip

当鼠标悬停在元素上时显示信息的弹出框。