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綁定鍵盤按鍵內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: