检测外部点击–vue-closable

检测外部点击–vue-closable
插件名称 vue-closable
发布时间 2020年5月31日
插件作者 TahaSh

只是另一个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-showv-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>