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