我在 vuejs 中使用 dropdown
菜单组件来制作普通的下拉菜单。
我的代码用于 dropdown
组件是:
<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>
现在,我通过在模板中使用以下代码,在我的 VUE
应用中的各个位置导入 dropdown
组件
<dropdown>
<li>
Action
</li>
</dropdown>
现在一切正常,但我希望同时只有一个下拉菜单处于事件状态。
我做了很少的研究,发现我可以使用像 https://github.com/davidnotplay/vue-my-dropdown 这样的插件但我不想使用它。同样,我也研究了上面的示例是如何工作的,但我想以这样一种方式实现此下拉功能,即我的 dropdown
组件将处理与下拉列表相关的所有事件。 那么你能帮我实现这个目标吗?
最佳答案
我知道这是一个很老的问题,但我认为最好的方法是在没有任何外部插件的情况下做到这一点,即向已安装的生命周期 Hook 添加一个点击监听器(并在 beforeDestroy Hook 上将其删除)并过滤组件上的点击,以便它仅在外部单击时隐藏。
<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>
关于javascript - 如果我们在vuejs中的菜单外单击,如何隐藏下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46038989/