Vue キー修飾子がイベントを処理する方法-jsチュートリアル-php.cn

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

不言

リリース： 2018-05-04 14:55:20

オリジナル

1315 人が閲覧しました

この記事では主に 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"/>

ログイン後にコピー