vue.js 消息通知插件_一个不错的Vue通知插件

vue.js 消息通知插件

通知Vue JS🚀 (Notification Vue JS 🚀)

The Notification vue plugin allow you to display notifications from all your app. Just with one ligne of code. I know there are lots of others but the peculiarity of this one is to have GSAP to animate your toast of a million way

Notification vue插件可让您显示来自所有应用程序的通知。 只需编写一个代码。 我知道还有很多其他方法，但是这个方法的特殊之处是让GSAP为您的面包干添加一百万种动画

如何使用它 (How to use it)

Install with pm

使用pm安装

npm i @kugatsu/vuenotification --save

Import with ES6

使用ES6导入

import VueNotification from "@kugatsu/vuenotification";

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

Throw notification where you want.

将通知扔到您想要的位置。

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

参量 (Parameters)

Name	Type	Default value
message	String	"🚧 You miss 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

名称	类型	默认值
信息	串	“🚧，你想念什么……”
标题	串	空值
计时器	数	5(s)
无限计时器	布尔型	假
位置	串	右上
类型	串	主
[类型]	目的	(请参阅类型部分)
showLeftIcn	布尔型	真正
showCloseIcn	布尔型	假
动画	功能	()=> TimelineMax
动画输出	功能	()=> TimelineMax

位置 (position)

Name	Value
top center	topRight
top left	topLeft
top right	topRight
bottom center	bottomCenter
bottom left	bottomLeft
bottom right	bottomRight

名称	值
最高中心	右上
左上方	左上方
右上	右上
底部中心	bottomCenter
左下方	左下方
右下	bottomRight

类型 (Type)

There is 5 notifications types.

有5种通知类型。

• primary

  主

• dark

  黑暗

• success

  成功

• warning

  警告

• error

  错误

To custom the colors of the notification you can do globaly or localy :

要自定义通知的颜色，可以全局或局部设置：

// Sample to change all error notification
Vue.use(NotificationVuejs, {
  error: {
    background: "green",
    color: "red"
  }
});

动画 (Animation)

To animate the in and out animation, we use GSAP. To customize the default animation, you have to add to your config object. animateIn and animateOut with function that return gsap timeline.

为了动画出入动画，我们使用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;
  }
});

You can select the notification with custom selector.

您可以使用自定义选择器选择通知。

Selector	Value to use
all notification	this.notification
current notification	this.notificationEl
all content of the notification	this.notificationElContent
Notification title	this.notificationTitle
Notification message	this.notificationMessage
Notification icone	this.notificationIcone
Notification close button	this.notificationIconeClose

选择器	使用价值
所有通知	此通知
当前通知	this.notificationEl
通知的所有内容	this.notificationElContent
通知标题	this.notificationTitle
通知讯息	this.notificationMessage
通知图标	this.notificationIcone
通知关闭按钮	this.notificationIcone关闭

翻译自: https://vuejsexamples.com/a-nice-notification-plugin-for-vue/

vue.js 消息通知插件