Vue 按鍵修飾符處理事件的方法
按鍵修飾符
在 PC 端開(kāi)發(fā)時(shí), 我們常常會(huì)遇到類似的需求, 比如用戶按下 enter 鍵時(shí)提交表單, 沒(méi)有用按鍵修飾符時(shí), 我們可能會(huì)去監(jiān)聽(tīng)鍵盤(pán)事件, 根據(jù) keyCode 的值加以判斷
Vue 新增按鍵修飾符和系統(tǒng)修飾符來(lái)處理類似事件
/** 提交表單 */
<template>
<div class="demo">
電話號(hào)碼:
<input type="text" placeholder="請(qǐng)輸入電話號(hào)碼" v-model="phone" @keyup.13="handleSubmit" />
</div>
</template>
<script>
export default {
data () {
return {
phone: '' // 電話號(hào)碼
}
},
methods: {
// TODO 提交電話號(hào)碼
handleSubmit () { alert(this.phone) }
}
}
</script>
要記住所有的 keyCode 值比較困難, 所以 Vue 為常用的按鍵提供了別名
<input type="text" placeholder="請(qǐng)輸入電話號(hào)碼" v-model="phone" @keyup.enter="handleSubmit" />
常見(jiàn)按鈕別名
enter tab delete esc space up down left right
如果這些別名不能滿足需要的話, 可以通過(guò)全局 config.keyCodes 對(duì)象自定義按鍵修飾符別名
Vue.config.keyCodes.x = 88
你也可以將 keyboardEvent.key 暴露的按鍵名轉(zhuǎn)換為 kebab-case 來(lái)作為修飾符, 以下兩種修飾符都能觸發(fā) handleSubmit 事件
<input type="text" placeholder="請(qǐng)輸入電話號(hào)碼" v-model="phone" @keyup.right="handleSubmit" /> <input type="text" placeholder="請(qǐng)輸入電話號(hào)碼" v-model="phone" @keyup.arrow-right="handleSubmit" />
系統(tǒng)修飾鍵
有時(shí)候我們需要配合系統(tǒng)修飾鍵共同觸發(fā)事件, 這里要注意的是, 單獨(dú)按下系統(tǒng)修飾鍵是不會(huì)觸發(fā)相應(yīng)事件的
系統(tǒng)修飾鍵包含 ctrl alt shift meta 鍵, 對(duì)于不同的鍵盤(pán), 這四個(gè)系統(tǒng)修飾鍵對(duì)應(yīng)各有不同, 對(duì)于 mac 系統(tǒng)鍵盤(pán), meta 鍵對(duì)應(yīng) command 鍵, 在 windows 系統(tǒng)鍵盤(pán)中對(duì)應(yīng) ⊞ 鍵
在下面的例子中, 當(dāng) control 和 v 鍵共同作用時(shí), 才會(huì)觸發(fā) handleSubmit 事件
<input type="text" placeholder="請(qǐng)輸入電話號(hào)碼" v-model="phone" @keyup.ctrl.v="handleSubmit"/>
有時(shí)候我們需要精確匹配到按鍵組合時(shí)才觸發(fā)相應(yīng)事件, 在下面的例子中, 當(dāng)且僅當(dāng) control 和 v 鍵共同作用時(shí), 才會(huì)觸發(fā) handleSubmit 事件
<input type="text" placeholder="請(qǐng)輸入電話號(hào)碼" v-model="phone" @keyup.ctrl.v.exact="handleSubmit"/>
總結(jié)
以上所述是小編給大家介紹的Vue 按鍵修飾符處理事件的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解Vue3如何優(yōu)雅的監(jiān)聽(tīng)localStorage變化
最近在研究框架，也仔細(xì)用了Vue3一些功能，所以本文就來(lái)和大家聊聊Vue3如何實(shí)現(xiàn)優(yōu)雅的監(jiān)聽(tīng)localStorage的變化，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
webpack+vue.js實(shí)現(xiàn)組件化詳解
vue的開(kāi)發(fā)體驗(yàn)還是比較愉悅的。首先文檔非常友好，所以上手會(huì)比較快。其次，配合webpack和vue-loader，每個(gè)頁(yè)面都是一個(gè).vue文件，寫(xiě)起來(lái)很方便。所以很適合做組件化開(kāi)發(fā)，這篇文章我們就來(lái)一起看看webpack+vue.js如何實(shí)現(xiàn)組件化。2016-10-10
快速搭建vue2.0+boostrap項(xiàng)目的方法
這篇文章主要介紹了快速搭建vue2.0+boostrap項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue+highCharts實(shí)現(xiàn)可選范圍的圖表
這篇文章主要為大家詳細(xì)介紹了vue+highCharts實(shí)現(xiàn)可選范圍的圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
詳解如何在 vue 項(xiàng)目里正確地引用 jquery 和 jquery-ui的插件
本篇文章主要介紹了詳解如何在 vue 項(xiàng)目里正確地引用 jquery 和 jquery-ui的插件，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
今天小編就為大家分享一篇vue 中滾動(dòng)條始終定位在底部的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue數(shù)據(jù)回顯表單無(wú)法編輯的解決方案
這篇文章主要介紹了Vue數(shù)據(jù)回顯表單無(wú)法編輯的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要介紹了vue3中router路由以及vuex的store使用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例
這篇文章主要介紹了antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue動(dòng)態(tài)綁定ref(使用變量)以及獲取方式
這篇文章主要介紹了vue動(dòng)態(tài)綁定ref(使用變量)以及獲取方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08