vue.js はキーボードイベントをリッスンします

Vue はキーボードを監視します。@ を使用して直接バインドするだけです。Vue はよく使用されるいくつかのキーのエイリアスを提供するため、keyCode

をクエリする必要はありません。 #all キーのエイリアス

# .enter

# .space

.up

.down

。 left

.right

1. input タグは Esc キーをバインドします

<input type="text" @keyup.esc="KeyUpEsc">

<script></script>

KeyUpEsc:function(){
      alert("监听到esc键")
  }

関数レンダリング

2 のイベント要素コンポーネント ライブラリの el-input タグを使用して、削除キーをバインドします。

<el-input v-model="input" placeholder="请输入内容" @keyup.delete.native="KeyUpDelete"></el-input>

のバインディング イベント今回は追加の .native 修飾子がありますか? これは、element-ui が div をカプセル化しているためである可能性があります。input タグの外側では、元のイベントが隠されているため、.native が追加されていない場合、キーストロークは有効になりません <script></script>

#

 KeyUpDelete :function(){
      alert("监听到delete键")
  },

# で定義されたイベント

3. 上記 2 つの実装効果は、input タグが入力されたときにのみキーボードを監視できることです。次の方法では、Enter キーをグローバルに監視し、監視イベントをドキュメントにバインドします (ログイン ページでよく使用されます)

 created: function() {
        var _this = this;
        document.onkeydown = function(e) {
            let key = window.event.keyCode;
            if (key == 13) {
                _this.submit();
            }
        };
    },

   methods: {
        submit: function() {
            alert("监听到enter键");
        },
   }

レンダリングを図に示します

##js 関連の知識をさらに知りたい場合は、私をクリックしてください:

js チュートリアル

以上がvue.js はキーボードイベントをリッスンしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。