Vue JS: открыть компонент меню с помощью кнопки, закрыть с помощью щелчка вне меню - PullRequest
Новая
       43

Vue JS: открыть компонент меню с помощью кнопки, закрыть с помощью щелчка вне меню

0 голосов
/ 21 мая 2019

Vue JS 2.6.10

Я прочитал множество SO-сообщений о том, как создать пользовательскую директиву, чтобы вы могли обнаружить щелчок за пределами всплывающего меню и закрыть его.,Я не могу заставить его работать, потому что у меня есть кнопка, которая открывает меню, и нажатие на нее запускает поведение «закрыть».

Вот мой основной вид Logbook.vue, который имеетКнопка, которая открывает меню: enter image description here

// --- Logbook.vue ---
<script>
export default {
  name: 'Logbook',
  components:{
    Years
  },
  methods:{
    clickYears: function(){
      this.$refs.Years.show = true
    }
  }
}
</script>
<template>
  <div id="current-year">
    <a href="#year" ref="yearButton" v-on:click.prevent="clickYears">{{ currentYear }}</a>
    <Years ref="Years" v-on:selectYear="yearSelected" />
  </div>
</template>

Вот компонент меню Years.vue, который открывается при нажатии кнопки: enter image description here

//--- Years.vue ---
<script>
import Vue from 'vue'

//Custom directive to handle clicks outside of this component
Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    window.event = function (event) {
      if (!(el == event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event)
      }
    };
    document.body.addEventListener('click', window.event)
  },
  unbind: function (el) {
    document.body.removeEventListener('click', window.event)
  }
})

export default{
  name: 'Years',
  data() {
    return {
      show: false
    }
  },
  methods:{
    close: function(){
      this.show = false
    }
  }
}
</script>

<template>
  <div id="years" v-show="show" v-click-outside="close">
  <!-- Years listed here... -->
  </div>
</template>

Метод close срабатывает надлежащим образом, когда я щелкаю вне компонента Years, но проблема в том, что я не могу открыть меню Years, чтобыНачнем с того, что нажатие кнопки также запускает поведение close, потому что оно также вне компонента Years.

Кто-нибудь преодолевал эту проблему?Есть идеи?

1 Ответ

2 голосов
/ 21 мая 2019

попробуйте 

...
methods:{
  clickYears: function(event){
    this.$refs.Years.show = true
    event.stopPropagation();
  }
}
...
...