el-input綁定鍵盤按鍵--按鍵修飾符

時間 2021-02-15 標籤 javascript html vue java npm element-ui app 測試 spa

vue怎麼寫鍵盤事件

vue容許將按鍵值做爲修飾符來使用，如監聽回車事件，有兩種寫法，以下代碼：javascript

<input type="text" @keyup.13="console.log($event)"></input>

<input type="text" @keyup.enter="console.log($event)"></input>

但要注意的是：當咱們在在el-input採用如上兩種寫法時，他是不生效的。el-input監聽不到鍵盤事件,緣由是element-ui是封裝組件，因此el標籤屬於自定義標籤，所以觸發不了鍵盤事件。
解決辦法：加上.native原生事件修飾符便可。.native：監聽組件根元素的原生事件，主要做用是給自定義的組件添加原生事件。
vue與elementUI中給el-input綁定鍵盤按鍵代碼以下：html

<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以上	中鍵

系統按鍵修飾符

別名修飾符	可用版本	對應按鍵
.ctrl	2.1.0以上	Ctrl鍵
.alt	2.1.0以上	Alt鍵
.shift	2.1.0以上	Shift鍵
.meta	2.1.0以上	meta鍵（Windows系統上爲田鍵）

關於組合修飾符的使用：
vue爲咱們提供了組合修飾符的機制，可是它的使用，必須配合系統按鍵修飾符才能夠生效。以下是一段測試代碼：vue

<!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>