nav-item-dropdown.vue
1.87 KB
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
<template>
<li :class="{'nav-item': true, open: show, dropdown: !dropup, dropup: dropup}">
<a @click.stop="toggle($event)" :class="['nav-link', dropdownToggle]" href="" v-on:click.prevent="" aria-haspopup="true" :aria-expanded="show" :disabled="disabled">
<slot>Slot</slot>
</a>
<div :class="{'dropdown-menu': true, 'dropdown-menu-right': rightAlignment}">
<slot name="dropdown-menu">Slot "items"</slot>
</div>
</li>
</template>
<script>
export default {
data() {
return {
show: false
};
},
computed: {
dropdownToggle() {
return this.caret ? 'dropdown-toggle' : '';
}
},
props: {
caret: {
type: Boolean,
default: true
},
text: {
type: String,
default: ''
},
dropup: {
type: Boolean,
default: false
},
rightAlignment: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
class: ['class']
},
methods: {
toggle(e) {
// return if disabled
if (this.disabled) {
return;
}
// hide an alert
this.show = !this.show;
// Dispatch an event from the current vm that propagates all the way up to its $root
if (this.show) {
this.$root.$emit('shown::dropdown');
e.stopPropagation();
} else {
this.$root.$emit('hidden::dropdown');
}
}
},
created() {
const hub = this.$root;
hub.$on('hide::dropdown', () => {
this.show = false;
});
}
};
</script>