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

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

Last synced: 24 days 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 (about 8 years ago)
• Default Branch: master
• Last Pushed: 2021-08-13T08:36:53.000Z (almost 3 years ago)
• Last Synced: 2024-01-12T04:44:21.310Z (5 months ago)
• Language: JavaScript
• Size: 19.5 KB
• Stars: 303
• Watchers: 2
• Forks: 71
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue-refactor - vue-click-outside ★2
• vue-awesome - Vue click outside - [](https://bundlephobia.com/result?p=vue-click-outside) (Libraries & Plugins / Helpers)
• awesome-vuejs - vue-click-outside ★2

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)