如果我们在 vuejs 的菜单外单击，如何隐藏下拉菜单 [英] how to hide dropdown menu if we click outside the menu in vuejs
问题描述
我在 vuejs 中使用 dropdown 菜单组件来制作普通的下拉菜单.我的代码用于 dropdown 组件是:
<span class="dropdown" :class="{显示:状态}"><a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">切换菜单</a><div class="dropdown-menu" v-show="state"><ul class="list-unstyled"><插槽></插槽></span><脚本>导出默认{name: '下拉菜单',数据 () {返回 {状态:假}},方法: {切换下拉菜单 (e) {this.state = !this.state;}}}
现在我在我的 VUE 应用程序中的不同位置使用模板中的以下代码导入 dropdown 组件
<下拉><li>行动</下拉菜单>现在工作正常，但我希望同时只有一个下拉菜单处于活动状态.
我做了一点研究，发现我可以使用像 https://github.com 这样的插件/davidnotplay/vue-my-dropdown 但我不想使用它.同样，我还研究了上述示例的工作原理，但我想以我的 dropdown 组件处理与下拉菜单相关的所有事件的方式来实现此下拉菜单功能.那么你能帮我实现这个目标吗?
我知道这是一个很老的问题，但我认为在没有任何外部插件的情况下做到这一点的最佳方法是向挂载的生命周期钩子添加一个单击侦听器(并删除它在 beforeDestroy 钩子上)并过滤组件上的点击，这样它只会在外部点击时隐藏.
<span class="dropdown" :class="{显示:状态}"><a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">切换菜单</a><div class="dropdown-menu" v-show="state"><ul class="list-unstyled"><插槽></插槽><过渡/></span><脚本>导出默认{name: '下拉菜单',数据 () {返回 {状态:假}},方法: {切换下拉菜单 (e) {this.state = !this.state},关闭 (e) {如果 (!this.$el.contains(e.target)) {this.state = false}}},挂载(){document.addEventListener('click', this.close)},beforeDestroy () {document.removeEventListener('click',this.close)}}
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>
这篇关于如果我们在 vuejs 的菜单外单击，如何隐藏下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
