Vue 按鍵修飾符處理事件的方法
按鍵修飾符
在 PC 端開發(fā)時, 我們常常會遇到類似的需求, 比如用戶按下 enter 鍵時提交表單, 沒有用按鍵修飾符時, 我們可能會去監(jiān)聽鍵盤事件, 根據(jù) keyCode 的值加以判斷
Vue 新增按鍵修飾符和系統(tǒng)修飾符來處理類似事件
/** 提交表單 */
<template>
<div class="demo">
電話號碼:
<input type="text" placeholder="請輸入電話號碼" v-model="phone" @keyup.13="handleSubmit" />
</div>
</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 來作為修飾符, 以下兩種修飾符都能觸發(fā) handleSubmit 事件
<input type="text" placeholder="請輸入電話號碼" v-model="phone" @keyup.right="handleSubmit" /> <input type="text" placeholder="請輸入電話號碼" v-model="phone" @keyup.arrow-right="handleSubmit" />
系統(tǒng)修飾鍵
有時候我們需要配合系統(tǒng)修飾鍵共同觸發(fā)事件, 這里要注意的是, 單獨按下系統(tǒng)修飾鍵是不會觸發(fā)相應事件的
系統(tǒng)修飾鍵包含 ctrl alt shift meta 鍵, 對于不同的鍵盤, 這四個系統(tǒng)修飾鍵對應各有不同, 對于 mac 系統(tǒng)鍵盤, meta 鍵對應 command 鍵, 在 windows 系統(tǒng)鍵盤中對應 ⊞ 鍵
在下面的例子中, 當 control 和 v 鍵共同作用時, 才會觸發(fā) handleSubmit 事件
<input type="text" placeholder="請輸入電話號碼" v-model="phone" @keyup.ctrl.v="handleSubmit"/>
有時候我們需要精確匹配到按鍵組合時才觸發(fā)相應事件, 在下面的例子中, 當且僅當 control 和 v 鍵共同作用時, 才會觸發(fā) handleSubmit 事件
<input type="text" placeholder="請輸入電話號碼" v-model="phone" @keyup.ctrl.v.exact="handleSubmit"/>
總結
以上所述是小編給大家介紹的Vue 按鍵修飾符處理事件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)卡片翻轉輪播展示，同時在翻轉時切換數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
vue中{__ob__: observer}對象轉化為數(shù)組進行遍歷方式
這篇文章主要介紹了vue中{__ob__: observer}對象轉化為數(shù)組進行遍歷方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了Vue.js的相關知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
npm install卡在“sill idealTree buildDeps“問題的兩種解
本文主要介紹了npm install卡在“sill idealTree buildDeps“問題的兩種解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-03-03
這篇文章主要介紹了關于Vue v-on指令的一些使用場景，比如監(jiān)聽事件、傳入event參數(shù)、事件修飾符的一些場景，下面就來看看具體使用的方法吧,需要的朋友可以參考一下2021-10-10
Vue3 獲取地址欄參數(shù)有兩個方式：查詢參數(shù)和路徑參數(shù)。Vue3獲取地址欄參數(shù)是從路由router中獲取，查詢參數(shù)和路徑參數(shù)獲取方式不一樣。感興趣的同學可以參考閱讀2023-04-04
vue父組件數(shù)據(jù)更新子組件相關內(nèi)容未改變問題(用watch解決)
這篇文章主要介紹了vue父組件數(shù)據(jù)更新子組件相關內(nèi)容未改變問題(用watch解決)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
如果引入的庫眾多,那么vendor.js文件體積將會相當?shù)拇?影響首開的體驗,這篇文章主要給大家介紹了關于Vue項目打包優(yōu)化實踐的相關資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了windows下vue-cli導入bootstrap樣式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了vue視圖不更新情況詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05