只是另一个Vue.js插件，用于检测元素的外部点击。

安装和下载：

# NPM
$ npm install vue-closable --save

使用

要侦听元素外部的点击，请在v-closable上使用指令，如下所示：

<div
  v-closable="{
    handler: 'onClose'
    exclude: ['fooElementRef', 'barElementRef']
  }"
></div>

handler具有用户在元素外部单击时要调用的方法的名称。所以您只需要在methods部分中定义它。

在其中，exclude我们具有一些元素，如果单击它们，就不想调用该处理程序。

注意，exclude我们使用元素的引用名称。您可以通过ref属性定义它们。例如：<button ref="button"></button>。

示例：在外部单击上关闭元素

v-closable之所以命名为该指令，是因为检测外部点击的常见用例是关闭元素（例如下拉菜单和模式）。为此，我们必须在元素上使用v-show或v-if，并将其值设置false为用户在其外部单击时的值。

这是一个例子：

<template>
  <div id="app">
    <button
      ref="button"
      class="toggle-button"
      @click="showPopup = !showPopup"
    >
      TOGGLE
    </button>
    <div
      v-show="showPopup"
      v-closable="{
        exclude: ['button'],
        handler: 'onClose'
      }"
      class="popup-box"
    >
      Test Popup Box
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import VueClosable from 'vue-closable'

Vue.use(VueClosable)

export default {
  data () {
    return {
      showPopup: false
    }
  },

  methods: {
    onClose () {
      this.showPopup = false
    }
  }
}
</script>

---

官网：https://github.com/TahaSh/vue-closable

演示：https://www.vue365.cn/code_demo.php?id=775

GitHub下载：https://github.com/TahaSh/vue-closable/archive/master.zip