vue-outside-events
    Overview
    Versions
    Jobs
    Chat
    Dependencies
    Contributors
    Documentation
    Alternatives
    Discussions

vue-outside-events

Vue 2.x directive to help a specified element listen for specific events occurring outside of itself.

1.1.3  •  Updated 2 years ago  •  by Nicholas Hutchind  •  MIT License

JavaScript Style Guide

Vue 2.x directive to react on events outside of an element without stopping the event’s propagation.

Works well for handling clicks outside of menus and popups. Can handle any DOM event or CustomEvent. Also able to capture jQuery events.

Install

npm install --save vue-outside-events

Demos

Check out the highly contrived demos here: https://nchutchind.github.io/vue-outside-events/docs/index.html

Use

Modular

import Vue from 'vue'
import vOutsideEvents from 'vue-outside-events'

Vue.use(vOutsideEvents)
<script>
  export default {
    methods: {
      onClickOutside (e, el) {
        console.log('onClickOutside');
        console.log('click heard outside element:', el);
        console.log('element clicked:', e.target);
        console.log('event:', e);
      },
      onMouseOutside (e, el) {
        console.log('onMouseOutside');
        console.log('mouse moved outside element:', el);
        console.log('element mouse moved over:', e.target);
        console.log('event:', e);
      },
      onFoo (e, el, extras) {
        console.log('onFoo');
        console.log('fooEvent happened outside element:', el);
        console.log('element that triggered foo:', e.target);
        console.log('event:', e);
        console.log('extras:', extras);
        console.log('bar:', extras.bar);
      }
    }
  };
</script>

<template>
  <div v-click-outside="onClickOutside"></div>
  <div v-mousemove-outside="onMouseOutside"></div>
  <div v-event-outside="{ name: 'fooEvent', handler: onFoo, bar: 'baz' }"></div>
</template>

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js" type="text/javascript"></script>
<script src="js/v-outside-events.min.js" type="text/javascript"></script>

<div id="app">
  <div v-click-outside="onClickOutside"></div>
  <div v-mousemove-outside="onMouseOutside"></div>
  <div v-event-outside="{ name: 'fooEvent', handler: onFoo, bar: 'baz' }"></div>
</div>

<script>
  new Vue({
    el: '#app',
    methods: {
      onClickOutside (e, el) {
        console.log('onClickOutside');
        console.log('click heard outside element:', el);
        console.log('element clicked:', e.target);
        console.log('event:', e);
      },
      onMouseOutside (e, el) {
        console.log('onMouseOutside');
        console.log('mouse moved outside element:', el);
        console.log('element mouse moved over:', e.target);
        console.log('event:', e);
      },
      onFoo (e, el, extras) {
        console.log('onFoo');
        console.log('fooEvent happened outside element:', el);
        console.log('element that triggered foo:', e.target);
        console.log('event:', e);
        console.log('extras:', extras);
        console.log('bar:', extras.bar);
      }
    }
  });
</script>

Events

Event Event Name Directive Binding
Click click v-click-outside =“handlerName”
Double-Click dblclick v-dblclick-outside =“handlerName”
Focus focusin v-focus-outside =“handlerName”
Blur focusout v-blur-outside =“handlerName”
Mouse Over / Enter mouseover v-mouseover-outside =“handlerName”
Mouse Move mousemove v-mousemove-outside =“handlerName”
Mouse Up mouseup v-mouseup-outside =“handlerName”
Mouse Down mousedown v-mousedown-outside =“handlerName”
Mouse Out mouseout v-mouseout-outside =“handlerName”
Key Down keydown v-keydown-outside =“handlerName”
Key Up keyup v-keyup-outside =“handlerName”
Key Press keypress v-keypress-outside =“handlerName”
Change change v-change-outside =“handlerName”
Select select v-select-outside =“handlerName”
Submit submit v-submit-outside =“handlerName”
Custom “eventName” v-event-outside ="{ name: ‘eventName’, handler: handlerName }"

Extras

Add additional key/value pairs to the custom event to pass data to the event handler.

<div v-event-outside="{ name: 'fooEvent', handler: onFoo, bar: 'baz' }"></div>
onFoo (e, el, extras) {
  console.log('onFoo');
  console.log('fooEvent happened outside element:', el);
  console.log('element that triggered foo:', e.target);
  console.log('event:', e);
  console.log('extras:', extras);
  console.log('bar:', extras.bar);
}

Modifiers

Add the jquery modifier to allow the directive to handle jQuery triggering of custom events. jQuery must be present in the window for this to work.

<div id="myDiv1" v-event-outside="{ name: 'onFoo', handler: onFooOutside }"></div>
<div id="myDiv2" v-event-outside.jquery="{ name: 'onFoo', handler: onFooOutside }"></div>

<script>
  $(document).trigger("onFoo"); // onFooOutside will be called for #myDiv2, but not #myDiv1

  var event = document.createEvent('Event');
  event.initEvent('onFoo', true, true);
  document.dispatchEvent(event); // onFooOutside will be called for #myDiv1 and #myDiv2
</script>

License

MIT License

Style

Standard - JavaScript Style Guide

Popularity

Stars
42

Maintenance

Development

Last ver 2 years ago
Created 3 years ago
Last commit 2 years ago
1 month between commits

Technology

Node version: 8.11.2
235.4K unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

2 contributors
Nicholas Hutchind
Maintainer, 16 commits, 1 merges
Hello Deadline
1 commits, 1 PRs
KleinMaximus
2 PRs
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.