Vue JS：使用按钮打开菜单组件，单击菜单外部关闭

Question

Vue JS 2.6.10

我阅读了许多有关如何创建自定义指令的SO帖子，以便您可以检测到弹出菜单之外的单击，从而可以将其关闭。我无法完全正常工作，因为我有一个按钮可以打开菜单，然后单击它会触发“关闭”行为。

这是我的主视图 Logbook.vue ，该视图具有可打开菜单的按钮：

// --- 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 ，当您单击按钮时，它将打开：

//--- 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组件之外也也。

有人克服了这个问题吗？有什么想法吗？

Answer 1

尝试

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