Skip to main content
replaced https://vuejs.org/v2 with https://v2.vuejs.org/v2
Fonte Link

Mais sobre custom directives (diretivas) no VueJS 2.x aquiaqui.

Mais sobre custom directives (diretivas) no VueJS 2.x aqui.

Mais sobre custom directives (diretivas) no VueJS 2.x aqui.

Fonte Link

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">...

inserir a descrição da imagem aqui

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.