Olá,
Procurando uma maneira simples de implementar a funcionalidade click-outside no elemento, encontrei esta directive
. Alias, não achei outra maneira se não por diretivas.
Abaixo está uma adequação da directive
para ES5
e mais algumas modificações.
Vue.directive('click-out', {
bind: function(element, binding, node) {
// verifica se o parametro da diretiva é diferente de um objeto do tipo function.
if(typeof binding.value !== 'function') {
var component = node.context.name;
var text = '[Vue-click-out:] a expressão informada deve ser uma função';
if(component) {
text += ' Component: ' + component;
};
console.warn(text);
};
// cria o evento e atribui ao elemento
var bubble = binding.modifiers.bubble;
var handler = function(evt) {
if(bubble || (!element.contains(evt.target) && element !== evt.target)) {
binding.value(evt);
};
};
element.__vueClickOutside__ = handler;
// adiciona o evento que trata os cliques fora do component
document.addEventListener('click', handler);
},
unbind: function(element) {
// remove o evento que trata cliques fora do componente
document.removeEventListener('click', element.__vueClickOutside__);
element.__vueClickOutside__ = null;
}
});
#Implementação
Registrando a diretiva acima em seu código, um exemplo de utilização ficará assim:
Vue.directive('click-out', {
bind: function(element, binding, node) {
// verifica se o parametro da diretiva é diferente de um objeto do tipo function.
if (typeof binding.value !== 'function') {
var component = node.context.name;
var text = '[Vue-click-out:] a expressão informada deve ser uma função';
if (component) {
text += ' Component: ' + component;
};
console.warn(text);
};
// cria o evento e atribui ao elemento
var bubble = binding.modifiers.bubble;
var handler = function(evt) {
if (bubble || (!element.contains(evt.target) && element !== evt.target)) {
binding.value(evt);
};
};
element.__vueClickOutside__ = handler;
// adiciona o evento que trata os cliques fora do component
document.addEventListener('click', handler);
},
unbind: function(element) {
// remove o evento que trata cliques fora do componente
document.removeEventListener('click', element.__vueClickOutside__);
element.__vueClickOutside__ = null;
}
});
var navList = new Vue({
el: '#app',
data: function() {
return {
visible: false
}
},
methods: {
show: function() {
this.visible = !this.visible;
},
hide: function() {
this.visible = false;
}
}
})
.dropdown {
display: none;
}
.dropdown.active {
display: block;
}
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
<ul>
<li>Home</li>
<li @click="show" v-click-out="hide">
Products
<ul class="dropdown" :class="{active: visible}">
<li>Product 1</li>
<li>Product 2</li>
</ul>
</li>
<li>About us</li>
</ul>
</div>
Basicamente você tem o v-bind
ou :
para class
verificando se visible
é verdadeiro (true
) e atribuindo a class .active
se for o caso. Também o v-on
ou @
para o evento click
, atribuindo pelo método show
, true
ou false
(o contrário do valor atual na propriedade) a visible
e a directive
v-click-out
, atribuindo pelo método hide
, false
a visible
.
#Teste
...<li @click="show" v-click-out="visible = true">...
No caso desta diretiva é possível somente informar um método para execução, porém você pode adequá-la para receber uma expressão do VueJS.
#Informações
Mais sobre custom directives
(diretivas) no VueJS 2.x aqui.