Vue.jsでグローバルイベントを処理する

Vueのイベント処理方法は素晴らしいです。要素に@eventName="eventHandler"属性を少し投げて、それを1日と呼びます。ただし、このような便利さは、デフォルトではグローバルイベントには拡張されません。 addEventListenerを使用した実証済みの方法を使用する必要があります。または、 DamianDuliszおよびEduardoSan MartinMoroteによって提供されたこの小さな便利な小さなVueコンポーネントを使用することもできます。

インストール

# Yarn
$ yarn vue-global-events
# NPM
$ npm install vue-global-events --save

使用法

次に、コンポーネントをmain.jsにインストールします。

main.js

import Vue from 'vue';
import App from './App.vue';
import GlobalEvents from 'vue-global-events';

// You can also import it individually per-component.
Vue.component(GlobalEvents);

new Vue({
  el: '#app',
  render: h => h(App)
});

これで、Vueの明確でシンプルな構文を使用しながら、任意のコンポーネントからあらゆる種類のグローバルイベントを聞くことができます。イベントの登録解除について心配する必要はありません。 v-ifおよび関連するディレクティブを使用して、ハンドラーを有効または無効にすることもできます。

<template>
  <div>
    <GlobalEvents
      @blur="handleAppBlur"
      @focus="handleAppFocus"
      @keydown.ctrl.tab="handleTabChange"
    ></GlobalEvents>
    <!-- The rest of your component -->
  </div>
</template>

<script>
export default {
  methods: {
    handleAppFocus() {
      console.log(`I've been focused!`);
    },

    handleAppBlur() {
      console.log(`I'm feeling a bit blurry...`);
    },

    handleTabChange() {
      console.log(`**Doing Tab Changy Things**`);
    }
  }
}
</script>