Como posso detectar um clique fora do meu elemento? Estou usando o Vue.js, então ele estará fora do meu elemento de templates. Eu sei fazer no Vanilla JS, mas não tenho certeza se existe uma maneira mais adequada de fazer isso, quando estou usando o Vue.js?
Esta é a solução para Vanilla JS: Javascript Detectar evento de clique fora de div
Acho que posso usar uma maneira melhor de acessar o elemento?
javascript
vue.js
Comunidade
fonte
fonte
Respostas:
Pode ser resolvido muito bem configurando uma diretiva personalizada uma vez:
Uso:
No componente:
Demonstração de trabalho no JSFiddle com informações adicionais sobre advertências:
https://jsfiddle.net/Linusborg/yzm8t8jq/
fonte
Existe a solução que usei, que é baseada na resposta de Linus Borg e funciona bem com vue.js 2.0.
Você se liga a ele usando
v-click-outside
:Aqui está uma pequena demonstração
Você pode encontrar mais informações sobre as diretivas personalizadas e o que el, binding, vnode significa em https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments
fonte
Adicione o
tabindex
atributo ao seu componente para que ele possa ser focado e faça o seguinte:fonte
outline: none;
foco para o elemento.Existem dois pacotes disponíveis na comunidade para esta tarefa (ambos são mantidos):
fonte
vue-clickaway
pacote resolveu meu problema perfeitamente. ObrigadoIsso funcionou para mim com Vue.js 2.5.2:
fonte
fonte
Combinei todas as respostas (incluindo uma linha de vue-clickaway) e encontrei esta solução que funciona para mim:
Use no componente:
fonte
Eu atualizei a resposta do MadisonTrash para oferecer suporte ao Mobile Safari (que não tem
click
evento,touchend
deve ser usado no lugar). Isso também incorpora uma verificação para que o evento não seja acionado arrastando em dispositivos móveis.fonte
Eu uso este código:
botão mostrar-ocultar
elemento mostrar-ocultar
roteiro
Atualizar: remover relógio; adicionar parar propagação
fonte
Eu odeio funções adicionais, então ... aqui está uma solução incrível vue sem métodos adicionais de vue, apenas var
fonte
Se estiver procurando especificamente por um clique fora do elemento, mas ainda dentro do pai, você pode usar
Eu uso isso para modais.
fonte
Você pode registrar dois ouvintes de evento para um evento de clique como este
fonte
fonte
A resposta curta: Isso deve ser feito com Diretivas Personalizadas .
Há muitas respostas excelentes aqui que também dizem isso, mas a maioria das respostas que vi se quebram quando você começa a usar o clique externo extensivamente (especialmente em camadas ou com várias exclusões). Eu escrevi um artigo sobre o meio falando sobre as nuances das Diretivas Personalizadas e, especificamente, a implementação desta. Pode não abranger todos os casos extremos, mas cobriu tudo que eu pensei.
Isso levará em conta várias ligações, vários níveis de outras exclusões de elementos e permitirá que seu manipulador gerencie apenas a "lógica de negócios".
Aqui está o código para pelo menos a parte de definição dele, verifique o artigo para uma explicação completa.
fonte
Fiz isso de uma maneira um pouco diferente usando uma função em created ().
Dessa forma, se alguém clicar fora do elemento, no meu caso, o navegador móvel ficará oculto.
Espero que isto ajude!
fonte
Já existem muitas respostas para essa pergunta, e a maioria delas é baseada na ideia de diretiva personalizada semelhante. O problema com essa abordagem é que é necessário passar uma função de método para a diretiva e não pode escrever código diretamente como em outros eventos.
Criei um novo pacote
vue-on-clickout
diferente. Confira em:Permite escrever
v-on:clickout
como qualquer outro evento. Por exemplo, você pode escrevere funciona.
Atualizar
vue-on-clickout
agora suporta Vue 3!fonte
Apenas se alguém estiver procurando como ocultar o modal ao clicar fora do modal. Como modal geralmente tem seu invólucro com a classe de
modal-wrap
ou qualquer coisa que você tenha nomeado, você pode colocar@click="closeModal"
o invólucro. Usando o tratamento de eventos declarado na documentação do vuejs, você pode verificar se o destino clicado está no wrapper ou no modal.fonte
As soluções @Denis Danilenko funcionam para mim, eis o que fiz: A propósito, estou usando o VueJS CLI3 e o NuxtJS aqui e com o Bootstrap4, mas também funcionará no VueJS sem o NuxtJS:
fonte
Você pode emitir um evento javascript nativo personalizado a partir de uma diretiva. Crie uma diretiva que despacha um evento do nó, usando node.dispatchEvent
Que pode ser usado assim
fonte
Eu crio um div no final do corpo assim:
Onde .fora está:
E away () é um método na instância Vue:
Fácil, funciona bem.
fonte
Se você tiver um componente com vários elementos dentro do elemento raiz, poderá usar esta solução It just works ™ com um booleano.
fonte
Use este pacote vue-click-outside
É simples e confiável, atualmente usado por muitos outros pacotes. Você também pode reduzir o tamanho do pacote javascript chamando o pacote apenas nos componentes necessários (veja o exemplo abaixo).
npm install vue-click-outside
Uso:
fonte
Não reinvente a roda, use este pacote v-click-outside
fonte
Você pode criar um novo componente que manipula o clique externo
E use este componente:
fonte
frequentemente as pessoas querem saber se o usuário deixa o componente raiz (funciona com qualquer componente de nível)
fonte
Eu tenho uma solução para lidar com o menu suspenso de alternância:
fonte
Estou usando este pacote: https://www.npmjs.com/package/vue-click-outside
Isso funciona bem para mim
HTML:
Meus códigos de script:
fonte