关于

Sonner 组件由 vue-sonner 提供，它是 Sonner 的 Vue 移植版本，最初由 Emil Kowalski 为 React 创建的。

安装

运行以下命令

npx shadcn-vue@latest add sonner

添加吐司组件

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

<script setup lang="ts">
import { Toaster } from '@/components/ui/sonner'
</script>

<template>
  <Toaster />
</template>

使用

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

<template>
  <Button
    variant="outline" @click="() => {
      toast('Event has been created', {
        description: 'Sunday, December 03, 2023 at 9:00 AM',
        action: {
          label: 'Undo',
          onClick: () => console.log('Undo'),
        },
      })
    }"
  >
    Add to calendar
  </Button>
</template>

示例

Sonner 与对话框

相关问题 https://github.com/radix-vue/shadcn-vue/issues/462

在您的 App.vue 文件中，将 pointer-events-auto 类添加到吐司组件中

<script setup lang="ts">
import { Toaster } from '@/components/ui/sonner'
</script>

<template>
  <Toaster class="pointer-events-auto" />
</template>