react 类似vue指令_Vue 2.x指令对元素外部的事件做出React

react 类似vue指令

外部事件 (vue-outside-events)

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

Vue 2.x指令对元素外部的事件做出React，而不会停止事件的传播。

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

非常适合处理菜单和弹出窗口之外的单击。 可以处理任何DOM事件或CustomEvent。 也能够捕获jQuery事件。

安装 (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

在此处查看高度人为的演示： 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);
      }
    }
  };
</script>

<template>
  <div v-click-outside="onClickOutside"></div>
  <div v-mousemove-outside="onMouseOutside"></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>

<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);
			}
		}
	});
</script>

修饰符 (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.

添加jquery修饰符以允许指令处理自定义事件的jQuery触发。 jQuery必须出现在窗口中才能起作用。

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

翻译自: https://vuejsexamples.com/vue-2-x-directive-to-react-on-events-outside-of-an-element/

react 类似vue指令