vue中el-input綁定鍵盤按鍵(按鍵修飾符)
更新時間：2020年07月22日 09:44:18 作者：linz
這篇文章主要介紹了vue中el-input綁定鍵盤按鍵(按鍵修飾符)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
vue怎么寫鍵盤事件
vue允許將按鍵值作為修飾符來使用，如監(jiān)聽回車事件，有兩種寫法，如下代碼：
<input type="text" @keyup.13="console.log($event)"></input>
<input type="text" @keyup.enter="console.log($event)"></input>
但要注意的是：當我們在在el-input采用如上兩種寫法時，他是不生效的。el-input監(jiān)聽不到鍵盤事件,原因是element-ui是封裝組件，所以el標簽屬于自定義標簽，因此觸發(fā)不了鍵盤事件。
解決辦法：加上.native原生事件修飾符即可。.native：監(jiān)聽組件根元素的原生事件，主要作用是給自定義的組件添加原生事件。
vue與elementUI中給el-input綁定鍵盤按鍵代碼如下：
<el-input placeholder="店鋪名稱" clearable v-model="queryObj.shopname" @keyup.enter.native="query"> <template slot="prepend">店鋪名稱</template> </el-input>
常用按鍵修飾符
| 別名修飾符 | 鍵值修飾符 | 對應按鍵 |
|---|---|---|
| .delete | .8/.46 | 回格/刪除 |
| .tab | .9 | 制表 |
| .enter | .13 | 回車 |
| .esc | .27 | 退出 |
| .space | .32 | 空格 |
| .left | .37 | 左 |
| .up | .38 | 上 |
| .right | .39 | 右 |
| .down | .40 | 下 |
鼠標按鍵修飾符
| 別名修飾符 | 可用版本 | 對應按鍵 |
|---|---|---|
| .left | 2.2.0以上 | 左鍵 |
| .right | 2.2.0以上 | 右鍵 |
| .middle | 2.2.0以上 | 中鍵 |
系統(tǒng)按鍵修飾符
| 別名修飾符 | 可用版本 | 對應按鍵 |
|---|---|---|
| .ctrl | 2.1.0以上 | Ctrl鍵 |
| .alt | 2.1.0以上 | Alt鍵 |
| .shift | 2.1.0以上 | Shift鍵 |
| .meta | 2.1.0以上 | meta鍵（Windows系統(tǒng)上為田鍵） |
關于組合修飾符的使用：
vue為我們提供了組合修飾符的機制，但是它的使用，必須配合系統(tǒng)按鍵修飾符才可以生效。如下是一段測試代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<button @click.ctrl="ctrlClick" @click="together">帶上ctrl來找我玩呀</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
methods: {
together(event) {
if (!event.ctrlKey) {
console.log('------------- 我是可愛的分割線呀 -------------')
console.log('$event.ctrlKey:', event.ctrlKey)
} else {
console.log('歡迎呀！')
}
},
ctrlClick(event) {
console.log('------------- 我是可愛的分割線呀 -------------')
console.log('$event.ctrlKey:', event.ctrlKey)
console.log('Ctrl你來了呀！')
}
}
})
</script>
</body>
</html>
到此這篇關于vue中el-input綁定鍵盤按鍵(按鍵修飾符)的文章就介紹到這了,更多相關el-input綁定鍵盤按鍵內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
下面小編就為大家?guī)硪黄獀ue2導航根據(jù)路由傳值,而改變導航內容的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Vue WatchEffect函數(shù)創(chuàng)建高級偵聽器
watchEffect傳入的函數(shù)會被立即執(zhí)行一次，并且在執(zhí)行的過程中會收集依賴；其次，只有收集的依賴發(fā)生變化時，watchEffect傳入的函數(shù)才會再次執(zhí)行2023-03-03
VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子
今天小編就為大家分享一篇VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue3使用ref解決GetElementById為空的問題
今天遇到一個問題,就是在Vue3組件中需要獲取template中的元素節(jié)點,使用GetElementById返回的卻是null,網(wǎng)上查找了好些資料,才發(fā)需要使用ref,所以本文給大家介紹了Vue3組件中如何使用ref解決GetElementById為空的問題,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue中如何實現(xiàn)變量和字符串拼接，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue如何實現(xiàn)observer和watcher源碼解析
這篇文章主要為大家詳細介紹了vue如何實現(xiàn)observer和watcher源碼的相關資料，分析vue的observe實現(xiàn)源碼，聊聊如何一步一步實現(xiàn)$watch，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了Element--el-tabs固定在頂部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了uniapp仿微信聊天界面的相關資料,這里提及了一個時間工具包timeMethod.js,該工具包可能提供了一系列時間處理的功能,如格式化日期、計算時間差等,以便在消息格式中正確展示時間信息,使用此類工具包可以大大提高開發(fā)效率,需要的朋友可以參考下2024-10-10
vue前端重構computed及watch組件通信等實用技巧整理
這篇文章主要為大家介紹了vue前端重構computed及watch組件通信等實用技巧整理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
本篇文章主要介紹了vue基于Element構建自定義樹的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09