vue中的事件修飾/鍵盤事件

vue中可以簡單實現一些事件修飾/鍵盤事件

事件修飾

  1. .prevent 阻止默認事件
  2. .stop 阻止事件冒泡
  3. .once 事件只觸發一次
  4. .capture 使用事件捕獲模式(默認是冒泡時候才觸發事件)
  5. .self 當前元素才會觸發事件event.target
  6. .passive 立即執行默認行為無需等待觸發事件完成(優化使用例如wheel事件)
  7. .native 組件上綁定@click會被當成自定義事件要使用$emit('click')觸發,若是要綁定原生的要使用@click.native修飾符號這樣解析就會變成原生的dom事件。

鍵盤事件

@keyup 按下抬起時觸發

@keydowon 按下時觸發

鍵盤事件限制按鈕可以使用以下別名的修飾

  1. .enter
  2. .delete
  3. .esc
  4. .space
  5. .tab
  6. .up
  7. .down
  8. .left
  9. .right

或是使用e.key拿到的名字,但是要使用kebab-case添加。

注意tab鍵tab,ctrl,alt,shift,meta,系統有默認事件的都要配合keydown使用才有效。

也可以使用keyCode來限制按鈕不過不推薦,最好使用按鍵名字。