3.1.2 • Published 1 year ago
vue-click-outside-element v3.1.2
vue-click-outside-element
This is a simple very small directive to detect clicks ouside element not component on which this directive applied. For clicking outside component check Vue-Click-Outside-Component
Install
- For Vue 3
npm i vue-click-outside-element
- For Vue 2
npm i vue-click-outside-element@1.0.15
NOTE: Vue 3 version of this directive is better typed and way better tested
Usage
Apply like basic directive.
It accepts only functions that are present inside methods
object.
<div v-click-outside-element="someRandomFunction">Hello World</div>
Example
// main.js
import vueClickOutsideElement from 'vue-click-outside-element'
const app = createApp(App)
/* NOTE: By default directive mounts with `click-outside-element`
* `app.use(vueClickOutsideElement)`
* But you can name it whatever you want
* app.use(vueClickOutsideElement, 'my-name')
* And use it like `<div v-my-name="method"></div>`
*/
app.use(vueClickOutsideElement)
app.mount('#app')
<!-- App.vue -->
<template>
<button v-click-outside-element="close" v-if="showButton">showing</button>
</template>
<script>
export default {
data() {
return { showButton: true }
},
methods: {
close(el){
this.showButton = false
}
}
}
</script>
Contrib
- Submit issue, any bugs, issues features are accepted.
- Clone, pull, play with example, test, submit merge request
Roadmap
- Combining
click outside element
andclick outside component
in one package - Introduce more tests
3.1.2
1 year ago
3.0.3
1 year ago
3.1.1
1 year ago
3.0.2
1 year ago
3.0.1
1 year ago
3.1.0
2 years ago
3.0.0
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.11
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.10
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.2
4 years ago
1.0.3
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago