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

- 日理万妓 2022-10-29 01:48 244阅读 0赞

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

![我不能没有的5个Vue.js库][5_Vue.js]

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

✅ directives: { onClickaway }

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

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

![我不能没有的5个Vue.js库][5_Vue.js 1]![我不能没有的5个Vue.js库][5_Vue.js 1]

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

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

closeMethod() {
      this.showSomething = false
    }

而不是这样：

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

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

[5_Vue.js]: /images/20221024/75c0cb67b0d34a3ea24775b468912461.png
[5_Vue.js 1]: /images/20221024/69865c32f86c421f958d531ca9769388.png