lhl 7eff0e2ec0 1-9		6 月之前
..
.github	7eff0e2ec0 1-9	6 月之前
__tests__	7eff0e2ec0 1-9	6 月之前
dist	7eff0e2ec0 1-9	6 月之前
src	7eff0e2ec0 1-9	6 月之前
.babelrc	7eff0e2ec0 1-9	6 月之前
.editorconfig	7eff0e2ec0 1-9	6 月之前
.eslintignore	7eff0e2ec0 1-9	6 月之前
.eslintrc.js	7eff0e2ec0 1-9	6 月之前
.nvmrc	7eff0e2ec0 1-9	6 月之前
.prettierignore	7eff0e2ec0 1-9	6 月之前
.prettierrc.json	7eff0e2ec0 1-9	6 月之前
.travis.yml	7eff0e2ec0 1-9	6 月之前
LICENSE	7eff0e2ec0 1-9	6 月之前
README.md	7eff0e2ec0 1-9	6 月之前
jest.config.js	7eff0e2ec0 1-9	6 月之前
package.json	7eff0e2ec0 1-9	6 月之前
webpack.config.js	7eff0e2ec0 1-9	6 月之前

v-click-outside-x

Vue V2 directive to react on clicks outside an element.

Install

$ npm install --save v-click-outside-x

$ yarn add v-click-outside-x

Use

import Vue from 'vue';
import * as vClickOutside from 'v-click-outside-x';

Vue.use(vClickOutside);

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

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

Directive

import * as vClickOutside from 'v-click-outside-x'

<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>

Event Modifiers

It is not a very common need to call event.preventDefault(), event.stopPropagation() or event.stopImmediatePropagation() for click outside event handlers. Care should be taken when using these!

The need for capture though, is reasonably common when you want menus or dropdown to behave more like their native elements.

<template>
  <!-- the click event´s propagation will be stopped -->
  <div v-click-outside.stop="doThis"></div>

  <!-- the click event´s default will be stopped -->
  <div v-click-outside.prevent="doThat"></div>

  <!-- modifiers can be chained -->
  <div v-click-outside.stop.prevent="doThat"></div>

  <!-- use capture mode when adding the event listener -->
  <div v-click-outside.capture="doThis"></div>
</template>

Pointer Events Examples

By default, if no argument is supplied then click will be used. You can specify the event type being bound by supplying an arguments, i.e. pointerdown.

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

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

For support of the PointerEvent API, consider loading the Pointer Events Polyfill.

Multiple Events Examples

<script>
  export default {
    methods: {
      onClickOutside1 (event) {
        console.log('Clicked outside 1. Event: ', event)
      },
      onClickOutside2 (event) {
        console.log('Clicked outside 2. Event: ', event)
      },
      onClickOutside3 (event) {
        console.log('Clicked outside 3. Event: ', event)
      }
    }
  };
</script>

<template>
  <div
    v-click-outside.capture="onClickOutside1"
    v-click-outside:click="onClickOutside2"
    v-click-outside:pointerdown.capture="onClickOutside3"
  ></div>
</template>

License

MIT License

README.md