隐藏clickaway VueJS的下拉菜单答案

【问题标题】：Hide dropdown on clickaway VueJS隐藏clickaway VueJS的下拉菜单
【发布时间】：2017-07-08 08:54:54
【问题描述】：

我有一个包含 position: absolute; 的下拉菜单，我需要它，所以当用户点击离开下拉菜单时它会关闭。

我只是有一个showDropdown 数据属性，该属性为真或假。点击按钮是：@click="showDropdown = !showDropdown"，一切正常。

我正在使用vue-clickaway mixin，但不知道如何仅在它打开时隐藏它。

非常感谢！

【问题讨论】：

标签： vuejs2

【解决方案1】：

使用 vue-clickaway 我使用了以下代码：

dropdownClickAway(e) {
    if(this.showDropdown && e.target != this.$refs.dropdownButton) this.showDropdown = false;
}

【讨论】：

【解决方案2】：

你应该有方法来切换下拉菜单。

一个用于切换下拉菜单。

toggleDropdown () {
    this.showDropdown = ! this.showDropdown
}

还有一个用于隐藏下拉菜单。

hideDropdown () {
    this.showDropdown = false
}

并在绑定事件（@click 和 v-on-clickaway）上使用它，如下所示：

<button class="dropdown-toggle" @click="toggleDropdown"> . . . </button>
// And
<div class="dropdown" v-show="showDropdown" v-on-clickaway="hideDropdown"> . . . </div>

【讨论】：

我认为v-on-clickaway属性应该在具有点击激活方法的按钮上。无论哪种方式，如果您使用的是 npm 包 vue-clickaway，这将很有效。

【解决方案3】：

这实际上更像是一个 CSS 问题而不是一个 Vue 问题，但你基本上可以做到以下几点：

// component
<div class="dropdown" :class="{ 'is-open': showDropdown }">
  // elements
  <button @click="showDropdown = !showDropdown">Close Dropdown</button>
</div>

// css
.dropdown {
  position: absolute;
  display: none;
  // other styles
}

.dropdown.is-open {
  display: block;
}

这一行：:class="{ 'is-open': showDropdown }" 在showDropdown === true 时应用is-open 类。无论is-open 类是否存在，display 属性基本上都会显示/隐藏菜单。您可以使用 css 过渡更改这些样式以提供更时尚的动画，但这是一般前提。

【讨论】：