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

Question

Vue JS 2.6.10

我已经阅读了各种有关如何创建自定义指令的 SO 帖子，以便您可以检测到弹出菜单外的点击，从而关闭它。我不能完全让它工作，因为我有一个按钮可以打开菜单并单击它会触发 "close" 行为。

这是我的主视图 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>

当我在 Years 组件外部单击时，close 方法正确触发，但问题是我无法打开 Years 菜单，因为单击 also 按钮会触发 close 行为，因为它 also 在 Years 组件之外。

有人解决过这个问题吗？有什么想法吗？

Answer 1

试试这个

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

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

Vue JS: Open Menu Component with Button, Close with Click Outside of Menu

javascript

vue.js

vue-component

vuejs2

custom-directive