File tree Expand file tree Collapse file tree 3 files changed +48
-27
lines changed Expand file tree Collapse file tree 3 files changed +48
-27
lines changed Original file line number Diff line number Diff line change 1
1
<template >
2
2
<section class =" d-flex justify-content-center align-items-center" >
3
- <dropdown class =" dropdown" >
3
+ <dropdown class =" dropdown" tag = " nav " >
4
4
<button class =" btn btn-primary" >Drop it Down</button >
5
5
6
6
<dropdown-menu class =" dropdown-menu show" >
Original file line number Diff line number Diff line change 1
- <template >
2
- <div @click =" toggleDrop" >
3
- <slot ></slot >
4
- </div >
5
- </template >
6
-
7
1
<script >
8
2
export default {
9
3
name: ' dropdown' ,
4
+ props: {
5
+ tag: {
6
+ type: String ,
7
+ default: ' div' ,
8
+ },
9
+ },
10
10
data : () => ({
11
11
dropdown: null ,
12
12
}),
13
+ computed: {
14
+ active () {
15
+ return this .dropdown ? this .dropdown .active : false ;
16
+ },
17
+ },
18
+ watch: {
19
+ active (val ) {
20
+ if (val) {
21
+ return document .addEventListener (' click' , this .clickAway );
22
+ } else {
23
+ return document .removeEventListener (' click' , this .clickAway );
24
+ }
25
+ },
26
+ },
27
+ render (h ) {
28
+ return h (this .tag , {
29
+ on: {
30
+ click: this .toggle ,
31
+ },
32
+ }, this .$slots .default );
33
+ },
13
34
mounted () {
14
35
this .dropdown = this .$children .find (child => {
15
36
return child .$options .name === ' dropdown-menu' ;
16
37
});
17
-
18
- document .addEventListener (' click' , this .clickAway );
19
38
},
20
39
methods: {
40
+ toggle () {
41
+ return this .dropdown .toggle ();
42
+ },
21
43
clickAway (event ) {
22
44
if (! this .dropdown .active ) {
23
45
return false ;
@@ -27,13 +49,6 @@ export default {
27
49
this .dropdown .toggle (false );
28
50
}
29
51
},
30
- toggleDrop () {
31
- this .dropdown .toggle ();
32
- },
33
52
},
34
53
};
35
54
</script >
36
-
37
- <style >
38
-
39
- </style >
Original file line number Diff line number Diff line change 1
- <template >
2
- <nav v-show =" active" >
3
- <slot ></slot >
4
- </nav >
5
- </template >
6
-
7
1
<script >
8
2
export default {
9
3
name: ' dropdown-menu' ,
4
+ props: {
5
+ tag: {
6
+ type: String ,
7
+ default: ' nav' ,
8
+ },
9
+ display: {
10
+ type: String ,
11
+ default: ' block' ,
12
+ }
13
+ },
10
14
data : () => ({
11
15
active: false ,
12
16
}),
17
+ render (h ) {
18
+ return h (this .tag , {
19
+ style: {
20
+ display: this .active ? this .display : ' none' ,
21
+ },
22
+ }, this .$slots .default );
23
+ },
13
24
methods: {
14
-
15
25
/**
16
26
* @param {boolean|void} active
17
27
* @return {any}
@@ -26,7 +36,3 @@ export default {
26
36
},
27
37
};
28
38
</script >
29
-
30
- <style scoped>
31
-
32
- </style >
You can’t perform that action at this time.
0 commit comments