插件名称 | 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 | “![]() |
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种通知类型。
要自定义通知的颜色,可以在全局或本地执行以下操作:
//示例以更改所有错误通知
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;
}
});