vue-click-outside

1.1.0 • Public • Published

ClickOutside

Vue click outside directive.

Installation

$ npm install vue-click-outside

Example

<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  ·  GitHub @fundon  ·  Twitter @_fundon

Readme

Keywords

none

Package Sidebar

Install

npm i vue-click-outside

Weekly Downloads

47,961

Version

1.1.0

License

MIT

Unpacked Size

4.43 kB

Total Files

4

Last publish

Collaborators

  • fundon
  • luventa