Vue.js快速通知插件 vueNotification

Vue.js快速通知插件 vueNotification
插件名称 vueNotification
发布时间 2020年5月19日
插件作者 kugatsu765

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 construction 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;
  }
});