3

Estou tentando fazer um menu dropdown no Vue (não quero usar Bootstrap-vue), então criei um isActiveDrop e defini como true, e sempre que clico no botao para abrir ele é definido como false, assim o menu aparece e some, porem como faria para esse menu sumir ao clicar fora? sem ter que clicar no icone, apenas clicando fora dele?

<i class="fa fa-menu" @click="menu"></i>

<ul  :class="{hidden: isActiveDrop}">
  <li>TESTE</li>
</ul>

1 Resposta 1

3

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.

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .