消息提示框

一种临时显示的简洁消息通知。

Component Source API Reference

安装 ​

运行以下命令 ​

pnpm dlx shadcn-vue@latest add toast

添加 Toaster 组件 ​

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

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

<template>
  <Toaster />

  <!-- Nuxt  -->
  <ClientOnly>
    <Toaster />
  </ClientOnly>
</template>

用法 ​

useToast 钩子返回一个 toast 函数，可用于显示消息提示。

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

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

<template>
  <Toaster />
  <Button
    @click="() => {
      toast({
        title: '已安排：跟进会议',
        description: '2023年2月10日星期五下午5:57',
      });
    }"
  >
    添加到日历
  </Button>
</template>

示例 ​

简单提示 ​

带标题提示 ​

带操作提示 ​

错误提示 ​

使用 toast({ variant: "destructive" }) 来显示错误类型的消息提示。

Edit this page on GitHub