https://github.com/vue-bulma/click-outside

ClickOutside directive for Vue.
https://github.com/vue-bulma/click-outside

Last synced: 4 months ago
JSON representation

ClickOutside directive for Vue.

• Host: GitHub
• URL: https://github.com/vue-bulma/click-outside
• Owner: vue-bulma
• License: mit
• Created: 2016-06-22T05:36:11.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2021-08-13T08:36:53.000Z (over 3 years ago)
• Last Synced: 2024-07-29T13:48:54.440Z (4 months ago)
• Language: JavaScript
• Size: 19.5 KB
• Stars: 304
• Watchers: 2
• Forks: 71
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ClickOutside

Vue click outside directive.

## Installation

```

$ npm install vue-click-outside

```

## Example

```vue

  


    
Toggle

    
Popup item

  


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

  }

}

```

## Badges

![](https://img.shields.io/badge/license-MIT-blue.svg)

![](https://img.shields.io/badge/status-stable-green.svg)

---

> [fundon.me](https://fundon.me)  · 

> GitHub [@fundon](https://github.com/fundon)  · 

> Twitter [@_fundon](https://twitter.com/_fundon)