Notification Vue插件可让您显示来自所有应用程序的通知。只需一行代码。平滑动画基于GSAP。

安装和下载：

# NPM
$ npm install @kugatsu/vuenotification gsap --save

使用：

使用ES6导入

import VueNotification from "@kugatsu/vuenotification";

Vue.use(VueNotification, {
  timer: 20
});

将通知发送到所需的位置。

this.$notification.new("hello world", {  timer: 10 });
this.$notification.error("hello world", { infiniteTimer: false });
...

参数：

名称	类型	默认值
message	String	“ You missed something …”
title	String	null
timer	Number	5(s)
infiniteTimer	Boolean	false
position	String	topRight
type	String	primary
[type]	Object	( See type section )
showLeftIcn	Boolean	true
showCloseIcn	Boolean	false
animateIn	Function	()=> TimelineMax
animateOut	Function	()=> TimelineMax

显示位置：

名称	值
top center	topCenter
top left	topLeft
top right	topRight
bottom center	bottomCenter
bottom left	bottomLeft
bottom right	bottomRight

显示类型

有5种通知类型。

• primary 主
• dark 暗
• success 成功
• warning 警告
• error 错误

要自定义通知的颜色，可以在全局或本地执行以下操作：

//示例以更改所有错误通知
Vue.use(NotificationVuejs, {
  error: {
    background: "green",
    color: "red"
  }
});

为了动画动画，我们使用GSAP。要自定义默认动画，必须将其添加到配置对象中。animateIn和animateOut带有返回gsap时间轴的函数。

Vue.use(NotificationVuejs, {
  animateIn: function() {
    var tl = new TimelineMax()
      .from(this.notificationEl, 0.6, {
        opacity: 0
      })
      .from(this.notificationEl, 0.4, {
        borderRadius: 100,
        width: 58,
        height: 58
      })
      .from(this.notificationElContent, 0.3, {
        opacity: 0
      });
    return tl;
  }
});

---

官网：https://github.com/kugatsu765/vueNotification

演示：https://www.vue365.cn/code_demo.php?id=636

GitHub下载：https://github.com/kugatsu765/vueNotification/archive/master.zip