chore: use <script setup>

This commit is contained in:
kolaente 2021-11-02 22:40:29 +01:00
parent fa25fbccd0
commit cff2a0bf6f
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 25 additions and 35 deletions

View File

@ -5,46 +5,36 @@
</div>
</template>
<script>
<script setup>
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
import {onBeforeUnmount, onMounted, ref} from 'vue'
export default {
setup() {
const open = ref(false)
const popup = ref(null)
const open = ref(false)
const popup = ref(null)
const toggle = () => {
open.value = !open.value
}
const hidePopup = e => {
if (!open.value) {
return
}
// we actually want to use popup.$el, not its value.
// eslint-disable-next-line vue/no-ref-as-operand
closeWhenClickedOutside(e, popup.value, () => {
open.value = false
})
}
onMounted(() => {
document.addEventListener('click', hidePopup)
})
onBeforeUnmount(() => {
document.removeEventListener('click', hidePopup)
})
return {
open,
toggle,
popup,
}
},
const toggle = () => {
open.value = !open.value
}
const hidePopup = e => {
if (!open.value) {
return
}
// we actually want to use popup.$el, not its value.
// eslint-disable-next-line vue/no-ref-as-operand
closeWhenClickedOutside(e, popup.value, () => {
open.value = false
})
}
onMounted(() => {
document.addEventListener('click', hidePopup)
})
onBeforeUnmount(() => {
document.removeEventListener('click', hidePopup)
})
</script>
<style scoped lang="scss">