chore: put ref on popup wrapper div instead of slot

This commit is contained in:
kolaente 2021-11-02 22:12:55 +01:00
parent bc7c89d859
commit 0fbe83c362
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B

View File

@ -1,7 +1,7 @@
<template> <template>
<slot name="trigger" :isOpen="open" :toggle="toggle"></slot> <slot name="trigger" :isOpen="open" :toggle="toggle"></slot>
<div class="popup" :class="{'is-open': open}"> <div class="popup" :class="{'is-open': open}" ref="popup">
<slot ref="popupContent"/> <slot/>
</div> </div>
</template> </template>
@ -12,7 +12,7 @@ import {onBeforeUnmount, onMounted, ref} from 'vue'
export default { export default {
setup() { setup() {
const open = ref(false) const open = ref(false)
const popupContent = ref(null) const popup = ref(null)
const toggle = () => { const toggle = () => {
open.value = !open.value open.value = !open.value
@ -23,9 +23,9 @@ export default {
return return
} }
// we actually want to use popupContent.$el, not its value. // we actually want to use popup.$el, not its value.
// eslint-disable-next-line vue/no-ref-as-operand // eslint-disable-next-line vue/no-ref-as-operand
closeWhenClickedOutside(e, popupContent.$el, () => { closeWhenClickedOutside(e, popup.$el, () => {
open.value = false open.value = false
}) })
} }