Vue キー修飾子を使用してイベントを処理する方法

今回は、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: '' // 电话号码
    }
  },
  methods: {
    // TODO 提交电话号码
    handleSubmit () { alert(this.phone) }
  }
}
</script>

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

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

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

enter tab

delete Es​​c space up down left right

これらのエイリアスがニーズを満たせない場合は、グローバル config.keyCodes

object

Vue.config.keyCodes.x = 88

キー名を使用してキー修飾子のエイリアスをカスタマイズできます。 key によって公開された は、修飾子として kebab-case に変換されます。次の 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 キーが含まれます。Mac のシステム キーボードでは、4 つのシステム修飾キーが異なるキーに対応します。キーは、Windows システム キーボードの ⊞ キーに対応するコマンド キーに対応します

次の例では、Ctrl キーと v キーが連携すると、handleSubmit イベントがトリガーされます

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

場合によっては、対応するイベント、次の例では、control キーと v キーが連動する場合にのみ、handleSubmit イベントがトリガーされます

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

この記事のケースを読んだ後は、この方法を習得したと思います。興味深い情報が満載です。PHP 中国語 Web サイトの記事にあるその他の関連トピックにも注目してください。

推奨読書:

Yuansheng JS コードを使用して Baidu 検索ボックスを実装する方法

フロントエンドの国際化を実現するための jQuery.i18n のメソッドとは何ですか

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