Como fechar um modal ao clicar fora:
Existem duas formas de se fazer, no seu caso, como você não tem uma div em volta do seu modal (um pessoal coloca pra escurecer a tela), geralmente por ele você poderia fazer esse clique de fora, ou como o seu não tem, você pode usar o próprio body
Porque existe um efeito colateral nos eventos, onde eles se propagam tanto dos elementos pais pros filhos, como vice-versa, esse efeito é chamado de bubbling e capturing
Você pode se aproveitar disso, se colocar o evento na <body>
como tudo é filho dele, ele vai capturar qualquer clique que tenha dado na tela
Mas isso também pode ser um problema, já que clicar no meio do modal também irá fechá-lo, e não deve ser isso que você quer
E aí que entra o @click.stop
, o aditivo stop
cancela esse efeito colateral na div onde está presente, então você pode colocá-lo no modal para que impeça que clicar no mesmo faça com que ele seja fechado.
Logo no seu código adicionaria o seguinte:
Adicionaria o evento na criação do componente, passando a função de toggle
Lembrando que é necessário remover o evento ao destruir o componente para que ele não tente executar mesmo após os modal ser removido
export default {
data(){...},
methods(){...},
created(){
window.body.addEventListener("click", this.toggle)
},
destroy(){
window.body.removeEventListener("click", this.toggle)
}
}
E mudaria o HTML, pra adicionar o @click.stop
na tag do menu/modal para impedir que o evento do body seja executado dentro do modal
<template>
<div class="cont-icom-seting">
<i @click.stop="toggle" class="fas fa-cog"></i>
<div v-show="isOpen">
<!-- Adcionado aqui ⬇️ -->
<div class="menuSusoenco" @click.stop>
<div class="contItensMenuSuspenco">
<div class="menuSusoenco-item">conteudo</div>
<div class="menuSusoenco-item">conteudo</div>
<div class="menuSusoenco-item">conteudo</div>
<hr />
<div class="menuSusoenco-item">Logout</div>
</div>
</div>
</div>
</div>
</template>
Porém, uma recomendação
Usar o body, que não é acessível diretamente por componentes Vue, induz que você precisa usar um evento que não é do Vue, e ainda que deve removê-lo depois que o componente é destruído, e caso esqueça isso pode gerar problemas.
Então, recomendaria colocar o que o pessoal chama de wrapper, que nada mais é que uma div que fica em volta de tudo.
Então, com um wrapper, você pode fazer com que uma div ocupe toda a tela e tenha a mesma função que estaria colocando no body, isso permitiria você usar tudo que está dentro do escopo do componente e ele ser totalmente independente, evitando gerar qualquer tipo de problema.
Logo, ficaria o seguinte:
Seu JS ficaria como está, sem a necessidade de mudar nada
o HTML, teria que adicionar o wrapper:
<template>
<!-- wrapper com toggle aqui ⬇️ -->
<div class="modal-wrapper" @click="toggle">
<div class="cont-icom-seting">
<i @click.stop="toggle" class="fas fa-cog"></i>
<div v-show="isOpen">
<!-- Adcionado stop aqui ⬇️ -->
<div class="menuSusoenco" @click.stop>
<div class="contItensMenuSuspenco">
<div class="menuSusoenco-item">conteudo</div>
<div class="menuSusoenco-item">conteudo</div>
<div class="menuSusoenco-item">conteudo</div>
<hr />
<div class="menuSusoenco-item">Logout</div>
</div>
</div>
</div>
</div>
</div>
</template>
Mas nesse caso seria necessário fazer com que o wrapper ocupe toda a tela, então precisaria mexer no CSS, adicionando:
.modal-wrapper {
position: fixed;
width: 100vw;
height: 100vh;
}
E uma observação
Você pode até estar usando o Vue 3, mas essa syntaxe não é nova, e é válida também para o Vue 2
Alternativas
Existem outras formas de fazer modais também, uma outra alternativa que pode ser de seu interesse é esta forma:
Building a Modal Component with Vue.js