Package Exports

v-click-outside

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (v-click-outside) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

v-click-outside

Vue directive to react on clicks outside an element without stopping the event propagation. Great for closing dialogues, menus among other things.

Install

$ npm install --save v-click-outside

$ yarn add v-click-outside

Use

import Vue from 'vue'
import vClickOutside from 'v-click-outside'

Vue.use(vClickOutside)

<script>
  export default {
    data () {
      vcoConfig: {
        handler: this.handler,
        middleware: this.middleware,
        events: ['dblclick', 'click']
      }
    },
    methods: {
      onClickOutside (event, el) {
        console.log('Clicked outside. Event: ', event)
      },

      handler (event, el) {
        console.log('Clicked outside (Using config), middleware returned true :)')
      },
      // Note: The middleware will be executed if the event was fired outside the element.
      //       It should have only sync functionality and it should return a boolean to
      //       define if the handler should be fire or not
      middleware (event, el) {
        return event.target.className !== 'modal'
      }
    }
  };
</script>

<template>
  <div v-click-outside="onClickOutside"></div>
  <div v-click-outside="vcoConfig"></div>
</template>

Or use it as a directive

import vClickOutside from 'v-click-outside'

<script>
  export default {
    directives: {
      clickOutside: vClickOutside.directive
    },
    methods: {
      onClickOutside (event) {
        console.log('Clicked outside. Event: ', event)
      }
    }
  };
</script>

<template>
  <div v-click-outside="onClickOutside"></div>
</template>

Example

Migrate from version 1

The notouch modifier is not longer supported, same functionality can be achieved using a middleware function

License

MIT License