forked from vikunja/frontend
chore: use <script setup>
This commit is contained in:
parent
fa25fbccd0
commit
cff2a0bf6f
|
@ -5,46 +5,36 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
|
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
|
||||||
import {onBeforeUnmount, onMounted, ref} from 'vue'
|
import {onBeforeUnmount, onMounted, ref} from 'vue'
|
||||||
|
|
||||||
export default {
|
const open = ref(false)
|
||||||
setup() {
|
const popup = ref(null)
|
||||||
const open = ref(false)
|
|
||||||
const popup = ref(null)
|
|
||||||
|
|
||||||
const toggle = () => {
|
const toggle = () => {
|
||||||
open.value = !open.value
|
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 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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
Loading…
Reference in New Issue
Block a user