您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關怎么在Vue 中利用按鍵修飾符處理事件,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關知識有一定的了解。
按鍵修飾符
在 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 暴露的按鍵名轉(zhuǎn)換為 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具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結構的分離、虛擬DOM、運行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗。
關于怎么在Vue 中利用按鍵修飾符處理事件就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。