Event Handling UI Utilities vue.js ライブラリ

ショートカットキーを設定できる「vue-global-events」

ショートカットキーを設定できる「vue-global-events」

vue-global-eventsとは

vue-global-eventsは、ショートカットキーをグローバルイベントとしてコンポーネントに登録できるライブラリです。

キーボードの組み合わせはもちろん、マウスのクリックも制御することが可能です。
単一のイベントで登録解除することも可能です。

 

ショートカットキーを設定できる「vue-global-events」

 

環境

Vue 2.6.10
vue-global-events 1.1.2

 

インストール

以下のnpmCDNを使ってインストールします。

npm

npm install vue-global-events

CDN

<script src="https://unpkg.com/[email protected]/dist/vue-global-events.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/shentao/vue-global-events/

 

導入手順

1. ライブラリの取り込み

(1)webpack等の場合 [注意]モジュール版は未検証です。

import GlobalEvents from 'vue-global-events'

(2)WEBページの場合

const GlobalEvents = window.VueGlobalEvents;

2.メソッドを設定

上記で取得したGlobalEventscomponent プロパティに取り込みます。

グローバルイベントを methods プロパティで設定します。

new Vue({
  el: '#app',
  components: {
    GlobalEvents: GlobalEvents
  },
  data: {
    counter: 0
  },
  methods: {
    plusOne:function() {
      this.counter++
    },
    minusOne:function() {
      this.counter--
    },
    reset:function() {
      this.counter = 0
    }
  }
});

3. テンプレートを準備

上記で取得したコンポーネントを配置します。

<GlobalEvents/> を設置し、これに各種イベントを設定していきます。

 

[注意] サンプルはケバブケースで記載しています。

<global-events
  @keydown.prevent.ctrl.digit1="minusOne"
  @keydown.prevent.ctrl.digit2="plusOne"
  @keydown.prevent.ctrl.-="minusOne"
  @keydown.prevent.ctrl.+="plusOne"
  @keydown.space.exact="reset"
  @click="plusOne"
  @contextmenu.prevent="minusOne"
  ></global-events>

 

サンプル

>>専用ページで確認する

 

さいごに

ショートカットキーをグローバルイベントとしてコンポーネントに登録できるライブラリでした。

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Event Handling, UI Utilities, vue.js, ライブラリ
-, , ,