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

投稿日: 2022-04-20 2022-10-07
タグ: 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>

getdocs

13036