/
Toast.js
58 lines (52 loc) · 1.93 KB
/
Toast.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/**
* Created by Aus on 2017/6/13.
*/
import Notification from './Notification'
// Toast组件比较特殊
// 因为<Toast />不会被直接渲染在DOM中
// 而是动态插入页面中
// Toast组件核心就是通过Notification暴露的重写方法 动态改变Notification
let newNotification;
// 获得一个Notification
const getNewNotification = () => {
// 单例 保持页面始终只有一个Notification
if (!newNotification) {
newNotification = Notification.reWrite();
}
return newNotification;
};
// notice方法实际上就是集合参数 完成对Notification的改变
const notice = (type, content, mask = false, iconClass, onClose, duration) => {
let notificationInstance = getNewNotification();
notificationInstance.notice({
duration,
type,
mask,
iconClass,
content,
onClose: () => {
if (onClose) onClose();
},
});
};
export default {
// 无动画
show: (content, mask, iconClass, onClose, duration) => (notice(undefined, content, mask, iconClass, onClose, duration)),
// 翻转效果
info: (content, mask, iconClass, onClose, duration) => (notice('info', content, mask, iconClass, onClose, duration)),
// 缩放效果
success: (content, mask, iconClass, onClose, duration) => (notice('success', content, mask, iconClass, onClose, duration)),
// 从下方滑入
warning: (content, mask, iconClass, onClose, duration) => (notice('warning', content, mask, iconClass, onClose, duration)),
// 抖动
error: (content, mask, iconClass, onClose, duration) => (notice('error', content, mask, iconClass, onClose, duration)),
// loading
loading: (content) => (notice(undefined, content || '加载中...', true, 'fa-circle-o-notch fa-spin', undefined, 0)),
// 销毁
hide() {
if (newNotification) {
newNotification.destroy();
newNotification = null;
}
},
}