如果我们在vue.js中单击菜单外，如何隐藏下拉菜单 [英] how to hide dropdown menu if we click outside the menu in vuejs

问题描述

我在vuejs中使用下拉列表菜单组件制作普通的下拉菜单。
我的代码用于下拉组件是：

 < ; template> 
< span class = dropdown：class = {shown：state}> 
< a href =＃ @ click.prevent = toggleDropdown class = dropdown-toggle>切换菜单< / a> 
< div class = dropdown-menu v-show = state> 
< ul class = list-unstyled> 
< slot>< / slot> 
< / ul> 
< / div> 
< / transition> 
< / span> 
< / template> 
 
< script> 
导出默认值{
名称：下拉列表，
 data（）{
 return {
 state：false 
} 
}，
方法：{
 toggleDropdown（e）{
 this.state =！this.state; 
} 
} 
} 
< / script> 
  

现在，我要导入下拉列表组件我的 VUE 应用在不同位置通过使用模板中的以下代码

  <下拉> 
< li> 
动作
< / li> 
< / dropdown> 
  

现在可以正常工作，但我希望同时只能激活一个下拉菜单。 / p>

我几乎没有做过研究，发现我可以使用 https://github.com/davidnotplay/vue-my-dropdown ，但我不想使用它。同样，我也研究了上面示例的工作方式，但是我想以这样的方式实现此下拉功能：我的 dropdown 组件将处理与下拉列表相关的所有事件。 那么您能帮助我如何实现这一目标吗？

解决方案

我知道这是一个很老的问题，但是我认为没有任何外部插件的最佳方法是在安装的生命周期挂钩中添加一个Click侦听器（并在beforeDestroy挂钩上将其删除）并过滤组件上的点击，以便仅在外部单击时才隐藏。

 < template> 
< span class = dropdown：class = {shown：state}> 
< a href =＃ @ click.prevent = toggleDropdown class = dropdown-toggle>切换菜单< / a> 
< div class = dropdown-menu v-show = state> 
< ul class = list-unstyled> 
< slot>< / slot> 
< / ul> 
< / div> 
< transition /> 
< / span> 
< / template> 
 
< script> 
导出默认值{
名称：下拉列表，
 data（）{
 return {
 state：false 
} 
}，
方法：{
 toggleDropdown（e）{
 this.state =！this.state 
}，
 close（e）{
 if（！this 。$ el.contains（e.target））{
 this.state = false 
} 
} 
}，
已装载（）{
文件.addEventListener（'click'，this.close）
}，
 beforeDestroy（）{
 document.removeEventListener（'click'，this.close）
} 
 } 
< / script> 
  

I am using a dropdown menu components in vuejs to make normal dropdown menu. My code is for dropdown component is :

<template>
    <span class="dropdown" :class="{shown: state}">
        <a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">toggle menu</a>
            <div class="dropdown-menu" v-show="state">
                <ul class="list-unstyled">
                    <slot></slot>
                </ul>
            </div>
        </transition>
    </span>
</template>

<script>
export default {
    name: 'dropdown',
    data () {
        return {
            state: false
        }
    },
    methods: {
        toggleDropdown (e) {
            this.state = !this.state;
        }
    }
}
</script>

Now I am importing the dropdown component in my VUE app at various place by using following code in the template

<dropdown>
    <li>
         Action
    </li>
</dropdown>

Now that is working fine but I want that only one dropdown should be active at the same time.

I have done little research and found that i can use plugins like https://github.com/davidnotplay/vue-my-dropdown but I don't want to use that. Again i have also studied how the above example works but I want to implement this dropdown functionality in such a way that my dropdown component would take care of all event related to dropdown. So can you help me how to achieve that?

解决方案

I know it's quite an old question but I think the best way to do that without any external plugins is to add a click listener to mounted lifecycle hook (and remove it on beforeDestroy hook) and filter the clicks on your component so it only hides when clicked outside.

<template>
    <span class="dropdown" :class="{shown: state}">
      <a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">toggle menu</a>
            <div class="dropdown-menu" v-show="state">
                <ul class="list-unstyled">
                    <slot></slot>
                </ul>
            </div>
        <transition/>
    </span>
</template>

<script>
export default {
  name: 'dropdown',
  data () {
    return {
      state: false
    }
  },
  methods: {
    toggleDropdown (e) {
      this.state = !this.state
    },
    close (e) {
      if (!this.$el.contains(e.target)) {
        this.state = false
      }
    }
  },
  mounted () {
    document.addEventListener('click', this.close)
  },
  beforeDestroy () {
    document.removeEventListener('click',this.close)
  }
}
</script>

这篇关于如果我们在vue.js中单击菜单外，如何隐藏下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！