Skip to content
πŸ”² Vue directive to react on clicks outside an element without stopping the event propagation
Branch: master
Clone or download
ndelvalle Merge pull request #43 from LordotU/fix/navigator-in-ssr
Fix SSR issue when navigator is not defined
Latest commit 2a90a12 Mar 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Fix SSR issue when navigator is not defined Mar 5, 2019
test
.babelrc
.editorconfig Improve API (#35) Aug 25, 2018
.eslintrc Improve API (#35) Aug 25, 2018
.gitignore Improve API (#35) Aug 25, 2018
.npmignore Support vue 2, add test, and remove dist files Apr 14, 2017
.prettierrc
LICENSE initial commit Apr 13, 2017
README.md Update README.md Aug 29, 2018
package-lock.json
package.json

README.md

v-click-outside

Codeship Status for ndelvalle/v-click-outside Coverage Status dependencies Status devDependencies Status Codacy Badge code style: prettier

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

Edit v-click-outside

Migrate from version 1

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

License

MIT License

You can’t perform that action at this time.