Skip to content

Commit 44ccb77

Browse files
author
Jeff
committed
use render functions
1 parent aa830e9 commit 44ccb77

File tree

3 files changed

+48
-27
lines changed

3 files changed

+48
-27
lines changed

src/Dev.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<section class="d-flex justify-content-center align-items-center">
3-
<dropdown class="dropdown">
3+
<dropdown class="dropdown" tag="nav">
44
<button class="btn btn-primary">Drop it Down</button>
55

66
<dropdown-menu class="dropdown-menu show">

src/Dropdown.vue

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,45 @@
1-
<template>
2-
<div @click="toggleDrop">
3-
<slot></slot>
4-
</div>
5-
</template>
6-
71
<script>
82
export default {
93
name: 'dropdown',
4+
props: {
5+
tag: {
6+
type: String,
7+
default: 'div',
8+
},
9+
},
1010
data: () => ({
1111
dropdown: null,
1212
}),
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+
},
1334
mounted () {
1435
this.dropdown = this.$children.find(child => {
1536
return child.$options.name === 'dropdown-menu';
1637
});
17-
18-
document.addEventListener('click', this.clickAway);
1938
},
2039
methods: {
40+
toggle() {
41+
return this.dropdown.toggle();
42+
},
2143
clickAway (event) {
2244
if (!this.dropdown.active) {
2345
return false;
@@ -27,13 +49,6 @@ export default {
2749
this.dropdown.toggle(false);
2850
}
2951
},
30-
toggleDrop () {
31-
this.dropdown.toggle();
32-
},
3352
},
3453
};
3554
</script>
36-
37-
<style>
38-
39-
</style>

src/DropdownMenu.vue

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
1-
<template>
2-
<nav v-show="active">
3-
<slot></slot>
4-
</nav>
5-
</template>
6-
71
<script>
82
export default {
93
name: 'dropdown-menu',
4+
props: {
5+
tag: {
6+
type: String,
7+
default: 'nav',
8+
},
9+
display: {
10+
type: String,
11+
default: 'block',
12+
}
13+
},
1014
data: () => ({
1115
active: false,
1216
}),
17+
render (h) {
18+
return h(this.tag, {
19+
style: {
20+
display: this.active ? this.display : 'none',
21+
},
22+
}, this.$slots.default);
23+
},
1324
methods: {
14-
1525
/**
1626
* @param {boolean|void} active
1727
* @return {any}
@@ -26,7 +36,3 @@ export default {
2636
},
2737
};
2838
</script>
29-
30-
<style scoped>
31-
32-
</style>

0 commit comments

Comments
 (0)