Fix closing

This commit is contained in:
René Preuß
2023-02-20 23:50:00 +01:00
parent 98c6326e32
commit 389af82cc3
2 changed files with 16 additions and 6 deletions

View File

@@ -28,22 +28,28 @@ export default {
data() { data() {
return { return {
open: false, open: false,
close: () => { closeListener: () => {
// is clicked outside the dropdown // is clicked outside the dropdown
if (!this.$el.contains(event.target)) { if (!this.$el.contains(event.target)) {
this.open = false; this.close()
} }
} }
} }
}, },
mounted() { mounted() {
document.addEventListener('click', this.close); document.addEventListener('click', this.closeListener);
}, },
beforeUnmount() { beforeUnmount() {
document.removeEventListener('click', this.close); document.removeEventListener('click', this.closeListener);
}, },
methods: {
close() {
this.open = false
}
}
} }
</script> </script>

View File

@@ -27,7 +27,7 @@
</div> </div>
<div class="w-20 h-18 flex justify-center items-center"> <div class="w-20 h-18 flex justify-center items-center">
<div class="w-1/2 h-11"> <div class="w-1/2 h-11">
<bitinflow-dropdown> <bitinflow-dropdown ref="dropdown">
<template #menu> <template #menu>
<template <template
v-for="option in options" v-for="option in options"
@@ -35,7 +35,7 @@
> >
<bitinflow-dropdown-item <bitinflow-dropdown-item
:destructive="option.destructive" :destructive="option.destructive"
@click="option.action([item])" @click="optionClick(option)"
> >
<i :class="['fal mr-2', option.icon ? option.icon : 'fa-play']"/> <i :class="['fal mr-2', option.icon ? option.icon : 'fa-play']"/>
{{ option.label }} {{ option.label }}
@@ -87,6 +87,10 @@ export default {
}, },
click() { click() {
this.$emit('click'); this.$emit('click');
},
optionClick(option) {
this.$refs.dropdown.close();
option.action([this.item])
} }
} }
} }