Vue キー修飾子がイベントを処理する方法

この記事では主に Vue のキー修飾子と同様のイベントを処理するためのシステム修飾子が追加されています。詳細については具体的な内容を参照してください

PC 上のキー修飾子

ユーザーが Enter キーを押したときにフォームを送信するなど、同様のニーズがよく発生します。キー修飾子が使用されていない場合、キーボード イベントをリッスンし、keyCode の値に基づいて判断することがあります

Vue はキー修飾子のシンボルとシステム修飾子を追加します。同様のイベントを処理します

/** 提交表单 */
<template>
  <p class="demo">
    电话号码:
    <input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.13="handleSubmit" />
  </p>
</template>

<script>
export default {
  data () {
    return {
      phone: &#39;&#39; // 电话号码
    }
  },
  methods: {

    // TODO 提交电话号码
    handleSubmit () { alert(this.phone) }
  }
}
</script>

すべての keyCode 値を記憶するのは難しいため、Vue はよく使用されるキーのエイリアスを提供します

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.enter="handleSubmit" />

共通のボタンのエイリアス

タブを入力、削除、ESC スペース、上、下、左、右

これらのエイリアスがニーズを満たせない場合は、グローバル config.keyCodes オブジェクトを通じてキー修飾子のエイリアスをカスタマイズできます

Vue.config.keyCodes.x = 88

keyboardEvent.key によって公開されるキー名をケバブケースの修飾子として変換することもできます。次の 2 つの修飾子は、handleSubmit イベントをトリガーできます

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.right="handleSubmit" />
<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.arrow-right="handleSubmit" />

システム修飾キー

ここで注意すべき点は、システム修飾キーを単独で押すことです。対応するイベントはトリガーされません

システム修飾キーには、Ctrl、Alt、Shift メタ キーが含まれます。キーボードが異なると、対応する 4 つのシステム修飾キーが異なります。Mac システム キーボードでは、メタ キーが対応し、コマンド キーが ⊞ に対応します。次の例では、Ctrl キーと v キーが連携すると、対応するイベントがトリガーされます。次の例では、handleSubmit イベントがトリガーされます。 Control キーと V キーが連動する場合にのみトリガーされます

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.ctrl.v="handleSubmit"/>

関連推奨事項:

vue 領域選択コンポーネントのチュートリアルの詳細な説明

以上がVue キー修飾子がイベントを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。