Implementation code for custom key modifiers (keyboard listening events) in Vue-JS Tutorial-php.cn

Implementation code for custom key modifiers (keyboard listening events) in Vue

不言

Release： 2018-08-14 16:24:04

Original

1785 people have browsed it

This article brings you the implementation code of custom key modifiers (keyboard listening events) in Vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

Key modifier is the keyboard listening event provided by Vue.

The code is as follows:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id=&#39;app&#39; style="width:90%;margin:0 auto;">
    <label>Id:<input type="text" v-model="id" class="form-control"></label>
    <label>Name:
        <!--输入完成之后按下 enter键即可调用add 方法-->
      <input type="text" v-model="name" class="form-control" @keyup.enter="add">
    </label>
    <input type="button" class="btn btn-primary" name="" value="添加" @click="add" />
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  var vm = new Vue({
    el:&#39;#app&#39;,
    data:{
      id:&#39;&#39;,
      name:&#39;&#39;,
    },
    methods:{
      add(){
        alert(this.name);
        this.id = this.name = "";
      },
    },
  });
</script>
</html>

Copy after login

All key aliases

.enter

.tab

.delete

.esc

.space

.up

.left

.down

.right

is OK Pass config.keyCodes Object custom key value modifier alias

js part definition:

//自定义全局按键修饰符，键盘码和键盘按键的对应关系可自行百度。
Vue.config.keyCodes.f2 = 113;

Copy after login

Use:

<input type="text" v-model="name" class="form-control" @keyup.f2="add">

Copy after login

Related recommendations:

Doubts about class member modifiers

vue custom instructions implement v-tap plug-in

vue’s detailed explanation of the use of custom dynamic components

The above is the detailed content of Implementation code for custom key modifiers (keyboard listening events) in Vue. For more information, please follow other related articles on the PHP Chinese website!