Question

我的下拉菜单中有position: absolute;我需要它，所以当用户点击下拉菜单时，它会关闭。

我只有一个showDropdown数据属性，无论是true还是false。点击按钮是：@click="showDropdown = !showDropdown"，这一切都完美无缺。

我正在使用vue-clickaway mixin，但无法弄清楚如何在它打开时隐藏它。

非常感谢！

Answer 1

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

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

Answer 2

这实际上是一个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 }"只在is-open时应用showDropdown === true类。 display属性基本上显示/隐藏菜单是否存在is-open类。您可以使用css过渡更改这些样式以提供更时尚的动画，但这是一般的前提。

Answer 3

你应该有方法来切换下拉列表。

一个用于切换下拉列表。

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>

隐藏单击VueJS的下拉列表

3 个答案: