vue3 简单通知组件 - vue3-notification

vue3的简单通知库。

这是euvl创建的现在支持Vue 3的Vue 2 vue通知的分支。如果您使用的是Vue 2.x，请使用他的版本。

下载安装

# Yarn
$ yarn add @kyvg/vue3-notification

# NPM
$ npm i @kyvg/vue3-notification

将依赖项添加到您的main.js：

import { createApp } from 'vue'
import Notifications from '@kyvg/vue3-notification'

const app = createApp({...})
app.use(Notifications)

将全局组件添加到您的App.vue：

<notifications />

触发.vue文件通知：

// simple
this.$notify("Hello user!");

// using options
this.$notify({
  title: "Important message",
  text: "Hello user!",
});

或从其他文件（例如，路由器）触发通知：

import { notify } from "@kyvg/vue3-notification";

notify({
  title: "Authorization",
  text: "You have been logged in!",
});

Vue.notify({
  title: "Vue 2 notification",
});

import { notify } from "@kyvg/vue3-notification";

notify({
  title: "Vue 3 notification ?",
});

通知组件的大多数设置是使用props配置的：

<notifications position="bottom right" classes="my-custom-class" />

请注意，所有道具都是可选的。

名称	类型	默认	描述
position	String/Array	‘右上’	屏幕上会弹出通知的部分
width	Number/String	300	通知持有人的宽度，可以是`%`，`px`字符串或数字。有效值：“ 100％”，“ 200px”，200
classes	String/Array	‘vue-notification’	将应用于通知元素的类的列表
group	String	null	通知持有人的姓名（如果指定）
duration	Number	3000	将通知保留在屏幕上的时间（以毫秒为单位）（如果否定-通知将永久保留或直到被单击）
speed	Number	300	显示/隐藏通知的时间（以毫秒为单位）
animation-type	String	‘css’	动画类型，当前支持的类型是`css`和`velocity`
animation-name	String	null	动画所需的`css`动画名称
animation	Object	Custom	Velocity动画的动画配置
max	Number	Infinity	通知持有人中可以显示的最大通知数
reverse	Boolean	false	以相反的顺序显示通知
ignoreDuplicates	Boolean	false	忽略同一通知的重复实例
closeOnClick	Boolean	true	单击时关闭通知