-1

Tenho um componente que tem um menu que abre e fecha quando clica nele, funciona bem, mas eu quero que ele feche quando eu clico fora dele, n sei como fazer isso dentro do vue, do jeito certo,

Eu chamo esse componente na minha pagina principal.

O meu componente:

export default {
    data(){
        return{
            isOpen: true,
        }
    },
    methods:{
        toggle(){
            this.isOpen = !this.isOpen
        }
    }
    
}
.menuSusoenco{
   
    width: 200px;
    color: black;
    border: solid 1px rgb(201, 201, 201);
    box-shadow:5px 5px 10px rgb(201, 201, 201);
    border-radius: 15px;
    position: fixed;
    right: 10px;
    background-color: #fff;
    

}

.contItensMenuSuspenco{
    padding: 0px 25px 25px 25px;

}
<template>
    <div class="cont-icom-seting">
        <i @click.stop.prevent="toggle" class="fas fa-cog"></i>

        <div v-show="isOpen">
            <div class="menuSusoenco">
                <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>

Qual o jeito correto de fechar esse menu quando o usuário clicar fora dele?

2 Respostas 2

0

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

-1

Primeiramente você precisa definir um atributo id ao seu elemento que quer fechar. Então:

mounted () {
    document.addEventListener('mousedown', (event) => {
      if (!event.target.closest('#sua_id_definida_no_elemento')) {
        this.isOpen = false
      }
    })
  }

Agora clicando fora do elemento com a id "sua_id_definida_no_elemento", seu "this.isOpen" será modificado para false.

Você deve fazer log-in para responder a esta pergunta.