如何使用Vue按鍵修飾符處理事件

這次帶給大家如何使用Vue按鍵修飾符處理事件，使用Vue按鍵修飾符處理事件的注意事項有哪些，下面就是實戰案例，一起來看一下。

按鍵修飾符

在PC 端開發時, 我們常常會遇到類似的需求, 例如用戶按下enter 鍵時提交表單, 沒有用按鍵修飾符時, 我們可能會去監聽鍵盤事件, 根據keyCode 的值加以判斷

Vue 添加按鍵修飾符和系統修飾符來處理類似事件

/** 提交表单 */
<template>
  <p class="demo">
    电话号码:
    <input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.13="handleSubmit" />
  </p>
</template>
<script>
export default {
  data () {
    return {
      phone: '' // 电话号码
    }
  },
  methods: {
    // TODO 提交电话号码
    handleSubmit () { alert(this.phone) }
  }
}
</script>

要記住所有的keyCode值比較困難, 所以Vue 為常用的按鍵提供了別名

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.enter="handleSubmit" />

常見按鈕別名

enter tab delete esc space up down left right

如果這些別名不能滿足需要的話, 可以透過全域config.keyCodes 物件自訂按鍵修飾符別名

Vue.config.keyCodes.x = 88

你也可以將keyboardEvent.key 暴露的按鍵名轉換為kebab-case 來作為修飾符, 以下兩種修飾符都能觸發handleSubmit 事件

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.right="handleSubmit" />
<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.arrow-right="handleSubmit" />

系統修飾鍵

有時候我們需要配合系統修飾鍵共同觸發事件, 這裡要注意的是, 單獨按下系統修飾鍵是不會觸發對應事件的

#系統修飾鍵包含ctrl alt shift meta 鍵, 對於不同的鍵盤, 這四個系統修飾鍵對應各有不同, 對於mac 系統鍵盤, meta 鍵對應command 鍵, 在windows 系統鍵盤中對應⊞ 鍵

在下面的例子中, 當control 和v 鍵共同作用時, 才會觸發handleSubmit 事件

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.ctrl.v="handleSubmit"/>

有時候我們需要精確匹配到按鍵組合時才觸發相應事件, 在下面的例子中, 當且僅當control 和v 鍵共同作用時, 才會觸發handleSubmit 事件

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.ctrl.v.exact="handleSubmit"/>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼使用源生JS程式碼實作百度搜尋框

jQuery.i18n實作前端國際化有哪些方法

以上是如何使用Vue按鍵修飾符處理事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！