While working with JavaScript, I was able to create this code for a popover. By clicking on the navbar-link element, the popover will appear or disappear. However, it would be great if I could close the popover by clicking anywhere on the screen (when the popover is open).
Does anyone have any ideas on how to achieve this?
<template>
<div>
<span class="navbar-link" v-on:click="toggle()">
<i class="ion-android-notifications-none"></i>
</span>
<div class="popover" v-bind:class="{ 'open': opened }">
Hello, world!
</div>
</div>
</template>
<script>
export default{
data(){
return {
opened: false
}
},
methods: {
toggle: function () {
this.opened = !this.opened;
}
}
}
</script>
Thank you in advance :)