插件名称 | 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-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>