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

有点hack，但是您可以使用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>

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

1 个答案: