キー修飾子キーボード イベントをリッスンする場合、詳細なキーを確認する必要があることがよくあります。 Vue では、キーボード イベントをリッスンするときに v-on にキー修飾子を追加できます。 <!-- `key` が `Enter` の場合にのみ `vm.submit()` を呼び出します --> <入力v-on:keyup.enter="送信"> KeyboardEvent.key によって公開される有効なキー名をケバブケースに変換するだけで、修飾子として使用できます。 <input v-on:keyup.page-down="onPageDown"> 必要に応じて古いブラウザをサポートするために、Vue は最も一般的なキーコードのエイリアスを提供します。
グローバル config.keyCodes オブジェクトを介してキー修飾子のエイリアスをカスタマイズすることもできます。 // `v-on:keyup.f1` を使うことができます Vue.config.keyCodes.f1 = 112 システム修飾キー次の修飾子を使用すると、対応するキーが押されたときにのみマウスまたはキーボード イベントをトリガーするリスナーを実装できます。
何かをする <!-- トリガーするには Alt + C を離します --> <input @keyup.alt.67="クリア"> <!-- Alt キーを押しながら任意のキーを離すことでトリガーされます--> <input @keyup.alt="other"><!-- Ctrl + Enter キーを押すとトリガーされます--><input @keydown.ctrl.13="submit"> elementUI 入力の場合、elementUI が入力をカプセル化し、ネイティブ イベントが機能しないため、最後に .native を追加する必要があります。 <input v-model="form.name" placeholder="ニックネーム" @keyup.enter="送信"> <el-input v-model="form.name" placeholder="ニックネーム" @keyup.enter.native="送信"></el-input> .exact 修飾子.exact 修飾子を使用すると、システム修飾子の正確な組み合わせによってどのイベントがトリガーされるかを制御できます。 <!-- Alt キーまたは Shift キーを同時に押した場合でも、この処理が実行されます --> <button v-on:click.ctrl="onClick">A</button> <!-- Ctrl キーが押されたときにのみトリガーされます--> <button v-on:click.ctrl.exact="onCtrlClick">A</button> <!-- システム修飾子が押されていない場合にのみトリガーされます--> <button v-on:click.exact="onClick">A</button> マウスボタン修飾子
これらの修飾子は、ハンドラー関数が特定のマウス ボタンにのみ応答するように制限します。 システムキーの組み合わせグローバルキー操作方法を監視したい場合、当然ながら、それをページ要素にバインドすることはできません。 マウントして監視できます: マウント() { document.onkeydown = 関数 (イベント) { キーを window.event.keyCode とします。 if (キー === 65 && event.ctrlKey) { // ctrl+A キーの組み合わせをリッスンします。window.event.preventDefault(); // ブラウザのデフォルトのショートカット キーをオフにします。console.log('crtl+ a キーの組み合わせ') } そうでない場合、key === 83 && event.ctrlKey) { window.event.preventDefault(); //ブラウザのショートカットキーを閉じる console.log('Save'); } } } 上記の例から、shift、control、Alt は JS では「window.event.shiftKey」、「window.event.ctrlKey」、および「window.event.altKey」に置き換えることもできることがわかります。 付録 - キーボードボタンのキーコード表以上がVueのキーボードイベント監視の詳細な概要です。Vueのキーボードイベント監視の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: DockerプライベートイメージライブラリとAlibaba CloudオブジェクトストレージOSSの簡単な分析
>>: MySQL 5.7.17 のインストールと使用方法のグラフィックチュートリアル
数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...
今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...
これ以上時間を無駄にせず、早速本題に入りましょう。 1. ロゴに代替テキストを追加するこれには 2 ...
目次序文vue-cli 2.0 バージョンvue-cli 3.0 バージョン要約する序文vue-cl...
自分でウェブページを書きたいので、HTML 言語についても少し勉強しています。これは、大学時代にウェ...
目次序文1. catコマンド: 2. moreコマンド: 3. lessコマンド: 4. headコ...
1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...
目次これ方法オブジェクト内これを隠した厳密モードこれを変更してこれいつものように、まずはコードを見て...
1. 全体的な手順冒頭で、RabbitMQ サービスをインストールして実行する方法を紹介しましたが、...
目次1. 開発環境から本番環境への移行2. 統一されたリクエストパスを設定する3. パッケージ化コマ...
序文最近、テスト環境で MySQL データベースが自動的に再起動し続ける問題が発生しました。原因は、...
目次1. 準備: 2. ソースコードのコンパイル1. 設定する2. コンパイルエラー3. ターゲット...
この記事では、例を使用して、MySQL データベースの最適化のためのインデックス実装の原則と使用方法...
MySQL 8.0 サービスを開始できません最近、 cmdで MySQL サービスを起動するときに遭...
目次チュートリアルシリーズ1. バックアップ戦略の説明1. バックアップの種類2. バックアップで考...