安装

运行以下命令

npx shadcn-vue@latest add toast

添加 Toaster 组件

将以下 Toaster 组件添加到您的 App.vue 文件中

<script setup lang="ts">
import Toaster from '@/components/ui/toast/Toaster.vue'
</script>

<template>
  <Toaster />
</template>

用法

useToast 钩子返回一个 toast 函数，您可以使用它来显示吐司。

import { useToast } from '@/components/ui/toast/use-toast'

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { useToast } from '@/components/ui/toast/use-toast'
import { Toaster } from '@/components/ui/toast'

const { toast } = useToast()
</script>

<template>
  <Toaster />
  <Button
    @click="() => {
      toast({
        title: 'Scheduled: Catch up',
        description: 'Friday, February 10, 2023 at 5:57 PM',
      });
    }"
  >
    Add to calendar
  </Button>
</template>

要同时显示多个吐司，您可以更新 use-toast.ts 中的 TOAST_LIMIT。

示例

简单

带标题

带操作

破坏性

使用 toast({ variant: "destructive" }) 来显示一个破坏性的吐司。