Vuejs2 在clickaway VueJS上隐藏下拉列表

我有一个下拉菜单，它有

位置：绝对我需要它，因此当用户从下拉列表中单击时，它将关闭

我只是有一个
showDropdown
data属性，它要么为true，要么为false。点击按钮是：
@click=“showDropdown=！showDropdown”
，这一切都非常有效

我使用的是
vue clickaway
mixin，但是我不知道如何在它打开时隐藏它

非常感谢
 这实际上是一个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;
}

//组件
//元素
关闭下拉列表
//css
.下拉列表{
位置：绝对位置；
显示：无；
//其他风格
}
.dropdown.is-open{
显示：块；
}

这一行：
：class=“{is open'：showDropdown}”
在
showDropdown===true时应用
is open
类。
显示
属性基本上显示/隐藏菜单，无论
是否打开
类是否存在。您可以使用css转换更改这些样式以提供更时尚的动画，但这是一般前提。
使用vue clickaway我使用了以下代码：

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

您应该使用多种方法来切换下拉列表

hideDropdown () {
    this.showDropdown = false
}

一个用于切换下拉列表

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

还有一个是为了隐藏下拉列表

hideDropdown () {
    this.showDropdown = false
}

并将其用于绑定事件（对于
@单击
和
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，这都会很好地工作。