キー修飾子キーボード イベントをリッスンする場合、詳細なキーを確認する必要があることがよくあります。 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 のインストールと使用方法のグラフィックチュートリアル
モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...
目次1. JSONPとは何か2. JSONPクロスドメインリクエスト3. Baidu検索をシミュレー...
現代の Web ビジュアル デザインは、初期の情報の積み重ねから、その後のグラフィックスと抽象化、そ...
目次導入従来のトランジションアニメーションCSS トランジションアニメーションjsアニメーション従来...
rpmインストールパッケージを使用してmysqlをオフラインでインストールします。参考までに準備:公...
ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリック...
目次1. コンポーネントの登録1.1 グローバル登録1.2 グローバルコンポーネントの登録プロセス1...
目次IN が遅いのはなぜですか? INとEXISTSのどちらが速いでしょうか?効率を向上させるにはど...
序文MySQL テーブルの主キーと外部キーを作成するときは、次の点に注意する必要があります。主キーと...
序文最近、オンラインでデータが誤って操作されました。データベースが直接変更されたため、それを回復する...
現在の日付 + 時刻 (日付 + 時刻) を取得する関数: now() mysql> now(...
この記事では、フリーウィンドウのマウス制御を実現するためのJavaScriptの具体的なコードを参考...
MySql インデックスの詳細な紹介と正しい使用方法1. はじめに:インデックスはクエリ速度に重大な...
この記事の例では、商品スクリーニング機能を実装するためのjsの具体的なコードを参考までに共有していま...
序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...