Vue中的按键修饰符

键盘修饰符

1.概念

　　在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。键盘事件的关键字为 keyup 。

• 　　不添加键盘修饰符，默认是按键按下后松开（键帽弹起）时触发。语法：v-on:keyup="show"。
• 　　添加键盘修饰符，按下键盘上指定的键时触发。语法：v-on:keyup.enter="show"。
• 　　使用键盘码值触发按键事件。语法：v-on:keyup.113="show"。
• 　　自定义键盘修饰符触发事件。语法：Vue.config.keyCodes.f2 = 113; v-on:keyup.f2="show"。

　　下面将详细介绍4种方式的使用。

2.不添加键盘修饰符

　　不需要任何修饰符，键盘上任意按键按下后弹起时触发。

<div id="app">
  <label>
    输入框：<input type="text" v-on:keyup="show">
  </label>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    methods: {
      show() {
        alert('键盘事件已被触发')
      }
    },
  })
</script>

3.使用vue提供的键盘码别名触发事件

　　vue提供了一些常用的键盘码别名，供我们使用，例如：enter、delete、tab、esc、space、up、down、left、right，具体参考vue管网。

　　下面我们以enter为例，它表示键盘上的回车键，下面示例在 input 输入框中按回车键就会触发事件。

<div id="app">
  <label>
    输入框：<input type="text" v-on:keyup.enter="show">
  </label>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    methods: {
      show() {
        alert('键盘事件已被触发')
      }
    },
  })
</script>

4.使用键盘码值触发事件

　　每一个键盘按键都对应一个数字，一般也会将这个数字称之为键盘码值，使用keyCode大全查看按键与数字的对应关系。

　　下面我们以 F2 为例，它对应的键盘码值为 113，下面示例在 input 输入框中按 F2 键就会触发事件。

<div id="app">
  <label>
    输入框：<input type="text" v-on:keyup.113="show">
  </label>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    methods: {
      show() {
        alert('键盘事件已被触发')
      }
    },
  })
</script>

5.自定义按键修饰符键盘码别名

　　vue默认提供的按键修饰符别名不够多，如果使用数字代替使得记忆不方便，因此我们可以自定义一些全局的键盘码别名，例如：F2 用来表示 113。

<div id="app">
  <label>
    输入框：<input type="text" v-on:keyup.f2="show">
  </label>
</div>

<script>
  // 自定义全局按键修饰符
  Vue.config.keyCodes.f2 = 113
  var vm = new Vue({
    el: '#app',
    methods: {
      show() {
        alert('键盘事件已被触发')
      }
    },
  })
</script>

 示例代码

 

转载请注明出处：https://www.cnblogs.com/unlockth/p/13485325.html