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

Posted 2023-02-23

【中文标题】通过单击外部（组件）在 Vuejs 中隐藏下拉菜单

【英文标题】：Hiding a dropdown in Vuejs by clicking outside (component)

【发布时间】：2019-10-27 01:28:06

【问题描述】：

我正在一个 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>

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

【问题讨论】：

这个你试过了吗：github.com/vue-bulma/click-outside#readme

如果我做对了，这应该可以帮助你：***.com/questions/36170425/…

它应该但它对我不起作用......我认为问题是我在另一个组件上调用菜单并且由于组件在 Vue 中是隔离的，所以整体示例不为我工作...

【参考方案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>

【讨论】：

谢谢！其实我是在用 SCSS/SASS 做这个项目，这会一样吗？

@helleworld_ 是的，它会起作用。如果你写对了，你的 SCSS/SASS 也会被转换成 CSS。但我必须提到tabindex 会干扰浏览器的本机选项卡序列。所以只有在它不会破坏你的 UI/UX 时才使用它