iT邦幫忙

2023 iThome 鐵人賽

0
Vue.js

從0開始學習30天可以到什麼程度?系列 第 18

No18: v-on鍵盤修飾子

  • 分享至 

  • xImage
  •  

keycode在網頁標準已經被移除,Vue.js3已經不推薦支持其寫法

在網頁處理事件時,有些需要就由判斷user的按鍵來進行不同的事件處理,在Vue.js裡控制這個部分event.key的鍵盤修飾子,基本上所有的鍵盤功能按鍵都有對應的修飾子來加在@keydown後面。比如:

  • .enter
  • .tab
  • .delete(backspace)
  • .esc
  • .space
  • .up/.down/.left/.right
  • .ctrl
  • .alt
  • .shift
  • .meta: 這個修飾子在window OS對應的是視窗win鍵win鍵,在mac OS對應的是command鍵command鍵
  • .page-down/.page-up: 在鍵盤上或許會有不同表現方式(PageDown/PGDN)之類的,但都需要轉換為連字號來使用。

實作: 而關於最有可能會用到的鍵盤修飾子應該就是@keydown.enter應用在讓user輸入完按下enter鍵再儲存data與輸出的事件。在Vue.js2.5中有添加了在修飾子後再加上.exact用來精確的判斷user按下的按鍵,用剛才的案例來說就是如果user同時按下enter與其他案件就不會觸發事件,可以用此方法來防止user誤觸。與鍵盤相同滑鼠也同樣有用來點及判斷的修飾子: @click.left/.right/.middle,可以來使用。


上一篇
D17: v-on modifiers
下一篇
No19: v-model解析
系列文
從0開始學習30天可以到什麼程度?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言