Open eakenbor opened 4 years ago
It would be good if there was a simple 'x' on the pop up to close the modal. Can this be easily done?
This can easily be done with placing a div that gets displayed when you toggle the picker.
<div
class="modal-container"
v-show="showEmojiPicker"
@click="toggleEmojiPicker"></div>
.modal-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1010;
}
And then adjust the z-index of the emoji-mart container. Which I think by default is 1 or 2.
.emoji-mart {
z-index: 1020;
}
@eakenbor I did the followings and it worked smoothly.
body
tag on mounted
event, which closes emoji picker.beforeDestroy
event to reduce memory leakHere is the emoji picker component which is toggled by icon button
<template>
<div class="emoji" @click.stop>
<div>
<font-awesome-icon
class="check"
icon="smile-beam"
@click.stop="toggleWindow"
/>
</div>
<picker
v-show="isOpen"
@select="addEmoji"
/>
</div>
</template>
<script>
import { Picker } from 'emoji-mart-vue'
export default {
components: {
Picker
},
data() {
return {
isOpen: false,
}
},
methods: {
toggleWindow() {
this.isOpen = !this.isOpen
},
addEmoji(emoji) {
// emit to parent or do something
},
hidePopup() {
this.isOpen = false
}
},
mounted() {
document.body.addEventListener('click', this.hidePopup)
},
beforeDestroy() {
document.body.removeEventListener('click', this.hidePopup)
}
}
</script>
I have tried using custom vue directives to close the modal upon clicking outside it but does not work as the event is triggered prematurely irrespective of the root element it is placed. Is there any inbuilt custom event for this? Or anyway around it?