Question

我在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>

现在我通过在模板中使用以下代码在我的dropdown应用中导入VUE个组件

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

现在工作正常，但我希望只有一个下拉列表可以同时处于活动状态。

我做了很少的研究，发现我可以使用像https://github.com/davidnotplay/vue-my-dropdown这样的插件，但我不想使用它。我再次研究了上面的例子是如何工作的，但是我想以这样的方式实现这个下拉功能，即我的dropdown组件将处理与下拉列表相关的所有事件。 那么你能帮我解决这个问题吗？

Answer 1

看看vue-clickaway。（Link）

有时您需要检测元素外部的点击（关闭模态窗口或隐藏下拉列表选项）。没有原生事件，Vue.js也不包括你。这就是vue-clickaway存在的原因。请在进一步阅读之前查看演示。

Answer 2

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

<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>

Answer 3

您可以使用blur事件，例如如果你添加一个方法：

close() {
    setTimeout(() => {
        this.state = false;
    }, 200);
}

并为您的链接设置blur事件：

<a href="#" @click.prevent="toggleDropdown" @blur="close">toggle menu</a>

然后，只要您的切换链接失去焦点，下拉菜单就会隐藏。 setTimeout是必需的，因为模糊后会发生Javascript点击事件，这会导致您的下拉链接无法点击。要解决此问题，请稍微延迟菜单隐藏。

如果我们在vuejs中单击菜单外，如何隐藏下拉菜单

3 个答案: