dropdown.vue
2.66 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<template>
<div :class="['btn-group',show?'show':'',dropup?'dropup':'']">
<b-button :class="[split?'':'dropdown-toggle']"
id="dropdownMenuButton"
@click="click"
aria-haspopup="true"
:aria-expanded="show"
:variant="variant"
:size="size"
:disabled="disabled">
<slot name="text">
{{text}}
</slot>
</b-button>
<b-button class="dropdown-toggle dropdown-toggle-split"
v-if="split"
@click="toggle"
:variant="variant"
:size="size"
:disabled="disabled"
>
<span class="sr-only">Toggle Dropdown</span>
</b-button>
<div :class="['dropdown-menu',right?'dropdown-menu-right':'']" v-if="show">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false
};
},
props: {
split: {
type: Boolean,
default: false
},
text: {
type: String,
default: ''
},
size: {
type: String,
default: null
},
variant: {
type: String,
default: null
},
dropup: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
right: {
type: Boolean,
default: false
}
},
mounted() {
if (typeof document !== 'undefined') {
document.documentElement.addEventListener('click', this.clickOut);
}
},
methods: {
toggle() {
this.setShow(!this.show);
},
setShow(state) {
if (this.show === state) {
return;
} // Avoid duplicated emits
this.show = state;
if (this.show) {
this.$emit('shown');
} else {
this.$emit('hidden');
}
},
clickOut() {
this.setShow(false);
},
click() {
if (this.split) {
this.$emit('click');
} else {
this.toggle();
}
}
}
};
</script>