通过单击外部（组件）在 Vuejs 中隐藏下拉菜单

Question

我正在一个 Vuejs 项目上创建一个菜单组件。这个菜单有 2 个下拉菜单，我已经创建了一些方法并使用了 Vue 指令，所以当我单击其中 1 个时，其他隐藏，反之亦然，我还想知道如何通过单击外部来隐藏它们。

我尝试了 2 个 Vue 库，但对我不起作用。另外，如果可能的话，我想手动而不是外部执行此操作。

HTML：

<!-- menu -->
<div>
  <ul>
    <li><span>Home</span></li>
    <li v-on:click="toggle1(), dropAreas =! dropAreas">
      <span>Areas</span>
    </li>
    <li v-on:click="toggle2(), dropAdmin =! dropAdmin">
      <span>Administration</span>
    </li>
  </ul>
</div>
<!-- /menu -->
<!-- dropdowns-->
<div v-if="dropAreas">
  <ul>
    <li>
      <span>Kitchen</span>
    </li>
    <li>
      <span>Baths</span>
    </li>
  </ul>
</div>
<div v-if="dropAdmin">
  <ul>
    <li>
      <span>Profile</span>
    </li>
    <li>
      <span>Services</span>
    </li>
  </ul>
</div>
<!-- /dropdowns-->

JS

data () {
    return {
      dropAreas: false,
      dropAdmin: false
    }
  },
  methods: {
    toggle1 () {
      if (this.dropAdmin === true) {
        this.dropAdmin = false
      }
    },
    toggle2 () {
      if (this.dropAreas === true) {
        this.dropAreas = false
      }
    }
  }

*此代码在另一个组件“Home”中被调用，如下所示：

<template>
  <div>
    <menu></menu>
    <!-- [...] -->
  </div>
</template>

关于如何手动完成的任何想法？可能吗？谢谢。

Answer 1

这有点小技巧，但您可以使用 tabindex HTML attribute 和 :focus CSS pseudo-class 来做到这一点：

new Vue({

  el: '#app',
  template: `
    <div class="container">
      <div
      ref="menu"
      id="menu"
      tabindex="0"
      >Menu</div>
      <ul id="dropdown">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  `

});

#menu {
  display: inline-block;
  padding: 1em;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

#dropdown {
  display: none;
}

#menu:focus + #dropdown {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app"></div>