64 lines
1.0 KiB
Markdown
64 lines
1.0 KiB
Markdown
# ClickOutside
|
|
|
|
Vue click outside directive.
|
|
|
|
## Installation
|
|
|
|
```
|
|
$ npm install vue-click-outside
|
|
```
|
|
|
|
## Example
|
|
|
|
```vue
|
|
<template>
|
|
<div>
|
|
<div v-click-outside="hide" @click="toggle">Toggle</div>
|
|
<div v-show="opened">Popup item</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ClickOutside from 'vue-click-outside'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
opened: false
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
toggle () {
|
|
this.opened = true
|
|
},
|
|
|
|
hide () {
|
|
this.opened = false
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
// prevent click outside event with popupItem.
|
|
this.popupItem = this.$el
|
|
},
|
|
|
|
// do not forget this section
|
|
directives: {
|
|
ClickOutside
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
|
|
## Badges
|
|
|
|

|
|

|
|
|
|
---
|
|
|
|
> [fundon.me](https://fundon.me) ·
|
|
> GitHub [@fundon](https://github.com/fundon) ·
|
|
> Twitter [@_fundon](https://twitter.com/_fundon)
|