1
+ <template >
2
+ <div :class =" { 'navbar-collapse': this.navbar }" >
3
+ <slot ></slot >
4
+ </div >
5
+ </template >
6
+
7
+ <script >
1
8
const props = {
2
- tag : {
3
- type : String ,
4
- default : 'div'
5
- } ,
6
9
duration: {
7
10
type: Number ,
8
11
default: 400
@@ -12,7 +15,8 @@ const props = {
12
15
default: ' ease-in-out'
13
16
},
14
17
show: Boolean ,
15
- navbar : Boolean
18
+ navbar: Boolean ,
19
+ toggler: String
16
20
}
17
21
18
22
export default {
@@ -22,18 +26,38 @@ export default {
22
26
return {
23
27
collapsing: false ,
24
28
heightWatcher: null ,
29
+ visible: this .show ,
30
+ el: null
25
31
}
26
32
},
27
33
watch: {
28
- show ( val ) {
29
- this . collapse ( val )
34
+ show (val , oldVal ) {
35
+ if (val === oldVal) return
36
+ this .visible = val
30
37
},
38
+ visible (val , oldVal ) {
39
+ if (val !== oldVal)
40
+ this .collapseController (val)
41
+ }
31
42
},
32
43
mounted () {
33
- this . $el . style . display = this . show ? '' : 'none'
44
+ this .$el .style .display = this .visible ? ' ' : ' none'
45
+ this .$nextTick (() => {
46
+ this .el = document .getElementById (this .toggler )
47
+ if (this .el )
48
+ this .el .addEventListener (' click' , this .collapse )
49
+ })
50
+ },
51
+ beforeDestroy () {
52
+ if (this .el )
53
+ this .el .removeEventListener (' click' , this .collapse )
34
54
},
35
55
methods: {
36
- collapse ( val ) {
56
+ collapse () {
57
+ this .visible = ! this .visible
58
+ },
59
+ collapseController (val ) {
60
+ this .visible = val
37
61
if (this .collapsing ) {
38
62
this .turn ()
39
63
const height = Number (this .collapsing .slice (0 ,- 2 ))
@@ -46,7 +70,7 @@ export default {
46
70
}
47
71
},
48
72
turn () {
49
- if ( this . show )
73
+ if (this .visible )
50
74
this .$el .style .height = this .collapsing
51
75
else
52
76
this .$el .style .height = 0
@@ -65,21 +89,13 @@ export default {
65
89
const self = this
66
90
this .heightWatcher = setTimeout (() => {
67
91
self .collapsing = false
68
- self . $el . style . display = self . show ? '' : 'none'
92
+ self .$el .style .display = self .visible ? ' ' : ' none'
69
93
self .$el .style .height = ' '
70
94
self .$el .style .overflow = ' '
71
95
self .$el .style .transition = ' '
72
- this . $emit ( 'finish' , self . show )
96
+ this .$emit (' finish' , self .visible )
73
97
}, duration)
74
98
}
75
- } ,
76
- render ( h ) {
77
- return h (
78
- this . tag ,
79
- {
80
- class : { 'navbar-collapse' : this . navbar }
81
- } ,
82
- [ this . $slots . default ]
83
- )
84
99
}
85
100
}
101
+ </script >
0 commit comments