Home > Article > Web Front-end > Implementation code for custom key modifiers (keyboard listening events) in Vue

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

不言Original: 2018-08-14 16:24:041779browse

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>

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;

Use:

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to download files to local through js code? (example)Next article：How to download files to local through js code? (example)

See more

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

Related articles