vue プロジェクトのバインディング キーボード イベントの詳細な説明

Vue プロジェクトでは、キーボード イベントがテキスト入力ボックスまたはボタン ボタンにバインドされていることが時々ありますが、最も一般的なのは Enter イベントです。

vue公式サイトに記載されている方法によると、

v-on:keyup.enter

略記:

@keyup.enter

コンポーネントにバインドされている場合は、ネイティブ修飾子を追加する必要があります

 <el-input
          v-focus
          :placeholder="$t('enterPoolName')"
          v-model.trim="strPool"
          :maxlength="100"
          @keyup.enter.native="handleSearchMember"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>

ただし、この方法はフォーカスを取得している場合のみ有効であり、フォーカスを失った場合はキーボード イベントを実行できません。

プロジェクトがフォーカスを失う必要がある場合でも、対応するキーボード イベントを実行し、ログインのためのフォームの送信などの所定の動作を完了できます。

次に、従来の方法でキーボード イベントをドキュメント ドキュメントにバインドし、キーボードの各キーの値を取得してキーボード イベントの応答を実行する必要があります。

mounted() {
    const that = this;
    document.addEventListener('keydown', that.handleWatchEnter);
  },
  methods: {
    handleWatchEnter(e) {
      var key = window.event ? e.keyCode : e.which;
      console.log(key);
      if (key === 13) {
        // 这里执行相应的行为动作
        console.log('++++');
      }
    },
}

最後に、キーボードの各キーに対応する値と、vue キーボード イベントの書き込みメソッドを追加します。

Vueのボタンキーボードイベント 

@keydown (キーボードが押されたときにトリガーされる)、@keypress (キーボードが押されたときにトリガーされる)、@keyup (キーボードがポップアップされる)

キーのキーコード e.keyCode を取得します

@keyup.13 Enterを押してください

@keyup.enter Enter

@keyup.up キーアップ

@keyup.downダウンキー

@keyup.left 左ボタン

@keyup.右右

@keyup.delete キーを削除します