vue3-notification-kit

一个轻量级的 Vue 3 通知组件库，包含 Toast、Confirm、Alert 和 Loading 组件。支持可配置的显示位置、颜色自定义和基于 Promise 的 await 模式。

特性

• 🎯 Toast 通知 - 支持成功、错误、警告、信息和加载状态
• 💬 确认对话框 - 基于 Promise 的确认对话框
• 📢 提示对话框 - 基于 Promise 的提示消息
• ⏳ 加载遮罩 - 全屏加载指示器
• 📍 可配置位置 - 支持 7 种位置：水平垂直居中、右上角、右下角等
• 🎨 自定义颜色 - 通过 CSS 变量轻松实现主题定制
• ⚡ Promise 支持 - 支持 await toast 消失后执行后续操作
• ✨ 平滑动画 - 入场和退场过渡动画
• 📱 响应式设计 - 适配各种屏幕尺寸

安装

pnpm add vue3-notification-kit
# or
npm install vue3-notification-kit
# or
yarn add vue3-notification-kit

快速开始

1. 在 App.vue 中导入组件

<template>
  <NotificationContainer />
  <LoadingOverlay />
  <!-- 您的应用内容 -->
</template>

<script setup>
import { NotificationContainer, LoadingOverlay } from 'vue3-notification-kit'
</script>

2. 使用组合式函数

<script setup>
import { useToast, useConfirm, useAlert, useLoading } from 'vue3-notification-kit'

const toast = useToast()
const { confirm } = useConfirm()
const { alert } = useAlert()
const loading = useLoading()

// Toast 示例
toast.success('操作成功！')

// 确认对话框示例
const result = await confirm('确定要删除吗？')
if (result) {
  // 用户确认
}

// 提示对话框示例
await alert('操作已完成')

// 加载示例
loading.show('加载中...')
// ... 异步操作 ...
loading.hide()
</script>

API

useToast()

const toast = useToast()

// 基本用法
toast.success('成功消息')
toast.error('错误消息')
toast.warning('警告消息')
toast.info('提示消息')
toast.loading('加载中...')

// 带选项
toast.success('消息', {
  duration: 3000, // 显示时长（毫秒），0 表示无限
  position: 'top-right', // 显示位置
  onDismiss: () => {}, // 消失时的回调
})

// 等待 toast 消失
await toast.success('2秒后消失')
console.log('Toast 已消失！')

// 关闭指定 toast
const { id } = toast.success('你好')
toast.dismiss(id)

// 清空所有 toast
toast.clear()

Toast 选项

| 选项 | 类型 | 默认值 | 描述 | | ----------- | -------- | --------------- | ---------------------------- | | duration | number | 3000 | 显示时长（毫秒），0 表示无限 | | position | string | 'center-center' | 显示位置 | | onDismiss | function | - | toast 消失时的回调函数 |

useConfirm()

const { confirm } = useConfirm()

const result = await confirm('确定要删除吗？', {
  title: '确认删除',
  confirmText: '删除',
  cancelText: '取消',
  danger: true,
})

// 用户确认返回 true，取消返回 false

Confirm 选项

| 选项 | 类型 | 默认值 | 描述 | | ------------- | ------- | --------- | -------------------------- | | title | string | 'Confirm' | 对话框标题 | | confirmText | string | 'OK' | 确认按钮文字 | | cancelText | string | 'Cancel' | 取消按钮文字 | | danger | boolean | false | 是否以危险样式显示确认按钮 |

useAlert()

const { alert } = useAlert()

await alert('操作成功完成', {
  title: '成功',
  confirmText: '确定',
})

Alert 选项

| 选项 | 类型 | 默认值 | 描述 | | ------------- | ------ | ------- | ------------ | | title | string | 'Alert' | 对话框标题 | | confirmText | string | 'OK' | 确认按钮文字 |

useLoading()

const loading = useLoading()

loading.show('加载数据中...')
// ... 异步操作 ...
loading.hide()

显示位置

Toast 通知支持以下 7 种位置：

| 位置 | 描述 | | --------------- | ---------------- | | center-center | 屏幕中央（默认） | | top-right | 右上角 | | top-left | 左上角 | | top-center | 顶部居中 | | bottom-right | 右下角 | | bottom-left | 左下角 | | bottom-center | 底部居中 |

自定义样式

通过 CSS 变量自定义颜色，在全局样式中添加：

:root {
  /* 主色调 */
  --notif-primary: #3b82f6;
  --notif-success: #22c55e;
  --notif-error: #ef4444;
  --notif-warning: #f59e0b;
  --notif-info: #0ea5e9;

  /* 背景和文字 */
  --notif-bg: #ffffff;
  --notif-fg: #1f2937;
  --notif-muted: #6b7280;
  --notif-border: #e5e7eb;

  /* 效果 */
  --notif-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --notif-radius: 12px;
}

许可证

MIT