点击按钮，显示弹窗，再次点击他处，弹窗关闭的插件vue-clickaway

先看效果：点击下拉选按钮，显示弹窗，点击弹窗之外的地方，弹窗隐藏 

 如果你真的单独导入，请记住，指令需要在指令下暴露。使其全局可用（在 main.js 中）

✅ directives: { onClickaway }

使其全局可用（在 main.js 中）

import { directive as onClickaway } from 'vue-clickaway'
Vue.directive('on-clickaway', onClickaway)

 

想象一下，我有一个完整的选择框，其中包含 li 元素列表（此处未显示）。上面的按钮用于触发我的自定义选择框项目列表，当我在该元素外点击时，会触发一个关闭选项列表的方法。这比强迫用户始终单击元素右上角处的“X”按钮要好得多。我们只需将以下内容添加到按钮即可获得此功能： v-on-clickaway = "closeMethodName"。

注意：你应该总是在 close 方法中使用 vue-clickaway ，而不是 toggle 方法。我的意思是这个方法连接到 v-on-clickaway 应该是这样的：

closeMethod() {
  this.showSomething = false
}

而不是这样：

toggleMethod() {
  this.showSomething = !this.showSomething
}

如果你使用了 toggle 方法，那么每当你在该元素外点击时，无论你点击什么，它都会打开，然后一遍遍地关闭该元素。这很可能不是你想要的结果，所以请记住使用 close 方法来防止这种情况发生。