/
MessageMixin.js
94 lines (93 loc) · 2.09 KB
/
MessageMixin.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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import Icon from '../components/icon/Icon'
export default {
components: {
[Icon.name]: Icon
},
props: {
active: {
type: Boolean,
default: true
},
title: String,
closable: {
type: Boolean,
default: true
},
type: String,
hasIcon: Boolean,
size: String,
iconPack: String,
iconSize: String,
autoClose: {
type: Boolean,
default: false
},
duration: {
type: Number,
default: 5000
}
},
data() {
return {
isActive: this.active
}
},
watch: {
active(value) {
this.isActive = value
},
isActive(value) {
if (value) {
this.setAutoClose()
} else {
if (this.timer) {
clearTimeout(this.timer)
}
}
}
},
computed: {
/**
* Icon name (MDI) based on type.
*/
icon() {
switch (this.type) {
case 'is-info':
return 'information'
case 'is-success':
return 'check-circle'
case 'is-warning':
return 'alert'
case 'is-danger':
return 'alert-circle'
default:
return null
}
}
},
methods: {
/**
* Close the Message and emit events.
*/
close() {
this.isActive = false
this.$emit('close')
this.$emit('update:active', false)
},
/**
* Set timer to auto close message
*/
setAutoClose() {
if (this.autoClose) {
this.timer = setTimeout(() => {
if (this.isActive) {
this.close()
}
}, this.duration)
}
}
},
mounted() {
this.setAutoClose()
}
}