-
-
Notifications
You must be signed in to change notification settings - Fork 6.9k
/
VSnackbar.ts
92 lines (81 loc) 路 2.02 KB
/
VSnackbar.ts
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
import '../../stylus/components/_snackbars.styl'
import Colorable from '../../mixins/colorable'
import Toggleable from '../../mixins/toggleable'
import { factory as PositionableFactory } from '../../mixins/positionable'
import mixins from '../../util/mixins'
import { VNode } from 'vue'
export default mixins(
Colorable,
Toggleable,
PositionableFactory(['absolute', 'top', 'bottom', 'left', 'right'])
/* @vue/component */
).extend({
name: 'v-snackbar',
props: {
autoHeight: Boolean,
multiLine: Boolean,
// TODO: change this to closeDelay to match other API in delayable.js
timeout: {
type: Number,
default: 6000
},
vertical: Boolean
},
data () {
return {
activeTimeout: -1
}
},
computed: {
classes (): object {
return {
'v-snack--active': this.isActive,
'v-snack--absolute': this.absolute,
'v-snack--auto-height': this.autoHeight,
'v-snack--bottom': this.bottom || !this.top,
'v-snack--left': this.left,
'v-snack--multi-line': this.multiLine && !this.vertical,
'v-snack--right': this.right,
'v-snack--top': this.top,
'v-snack--vertical': this.vertical
}
}
},
watch: {
isActive () {
this.setTimeout()
}
},
mounted () {
this.setTimeout()
},
methods: {
setTimeout () {
window.clearTimeout(this.activeTimeout)
if (this.isActive && this.timeout) {
this.activeTimeout = window.setTimeout(() => {
this.isActive = false
}, this.timeout)
}
}
},
render (h): VNode {
return h('transition', {
attrs: { name: 'v-snack-transition' }
}, this.isActive && [
h('div', {
staticClass: 'v-snack',
class: this.classes,
on: this.$listeners
}, [
h('div', this.setBackgroundColor(this.color, {
staticClass: 'v-snack__wrapper'
}), [
h('div', {
staticClass: 'v-snack__content'
}, this.$slots.default)
])
])
])
}
})