msg-push-cards

轻量级 Vue 3 推送消息 / 通知组件与插件。

安装

npm install msg-push-cards

或

yarn add msg-push-cards

使用说明

1. 全局安装（在 main.js / main.ts）

import { createApp } from 'vue'
import App from './App.vue'
import Notifications from 'msg-push-cards'

const app = createApp(App)
app.use(Notifications)
app.mount('#app')

import Notifications from 'msg-push-cards' 会自动注入组件样式。

如果你想手动引入样式，也可以使用：

import 'msg-push-cards/dist/style.css'

2. 在组件中使用

Options API

export default {
  mounted() {
    this.$notify({
      title: '提示',
      message: '操作成功',
      type: 'success',
      timeout: 3000
    })
  }
}

Composition API / <script setup>

import { useNotify } from 'msg-push-cards'

const notify = useNotify()

notify({
  title: '提示',
  message: '操作成功',
  type: 'success',
  timeout: 3000
})

3. 程序化调用（无需插件安装）

import { notify } from 'msg-push-cards'

notify({
  title: 'Hello',
  message: '这是一个通知',
  type: 'info',
  timeout: 4000
})

4. AlertCard 组件

如果你希望在页面中直接展示警告/提示卡片，可以使用 AlertCard 组件：

<template>
  <AlertCard
    title="系统预警"
    message="当前 CPU 使用率已超过 90%，请尽快排查。"
    type="warning"
    :closable="true"
  />
</template>

<script setup>
import { AlertCard } from 'msg-push-cards'
</script>

组件支持 props：

• title：卡片标题
• message：提示内容
• type：info | success | warning | error
• timeout：自动关闭时间，单位毫秒
• closable：是否显示关闭按钮
• compact：紧凑样式

注意事项

• this.$notify 仅在插件已通过 app.use(Notifications) 注册后，在 Options API 组件中可用。
• 如果你使用 <script setup> 或 Composition API，请使用 useNotify()。
• 如果直接导入 notify，则无需先安装插件。

支持参数

{
  title?: string
  message?: string
  type?: 'info' | 'success' | 'warning' | 'error'
  timeout?: number
}

支持的 type：info、success、warning、error。