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 サイトの記事にあるその他の関連トピックにも注目してください。

推奨読書:

JS Baidu検索ボックス効果機能の実装事例の詳細な説明

マウスと画像間のインタラクティブな拡大効果を実現するJS+CSS3

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