在el-tabs組件上綁定“keydown.native.delete.capture.stop.prevent”即可:
<el-tabs @keydown.native.delete.capture.stop.prevent> <el-tab-pane v-for="(tabItem) in item.option" :key="tabItem.name" :label="tabItem.text" :name="tabItem.name"></el-tab-pane> </el-tabs>
一、事件修飾符
在事件處理程序中調用 event.preventDefault()
或 event.stopPropagation()
是非常常見的需求。盡管我們可以在方法中輕松實現這點,但更好的方式是:方法只有純粹的數據邏輯,而不是去處理 DOM 事件細節。
為了解決這個問題,Vue.js 為 v-on
提供了事件修飾符,修飾符是由點開頭的指令后綴來表示的。
-
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件監聽器時使用事件捕獲模式 --> <!-- 即內部元素觸發的事件先在此處理,然后才交由內部元素進行處理 --> <div v-on:click.capture="doThis">...</div> <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div> <!-- 點擊事件將只會觸發一次 --> <a v-on:click.once="doThis"></a> <!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 --> <!-- 而不會等待 `onScroll` 完成 --> <!-- 這其中包含 `event.preventDefault()` 的情況 --> <div v-on:scroll.passive="onScroll">...</div>
使用修飾符時,順序很重要;相應的代碼會以同樣的順序產生。因此,用
v-on:click.prevent.self
會阻止所有的點擊,而v-on:click.self.prevent
只會阻止對元素自身的點擊。
二、按鍵修飾符
在監聽鍵盤事件時,我們經常需要檢查詳細的按鍵。Vue 允許為 v-on
在監聽鍵盤事件時添加按鍵修飾符:
<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` --> <input v-on:keyup.enter="submit">
你可以直接將 KeyboardEvent.key
暴露的任意有效按鍵名轉換為 kebab-case 來作為修飾符。
<input v-on:keyup.page-down="onPageDown">
2.1按鍵碼
keyCode
的事件用法已經被廢棄了並可能不會被最新的瀏覽器支持。
使用 keyCode
attribute 也是允許的:
<input v-on:keyup.13="submit">
為了在必要的情況下支持舊瀏覽器,Vue 提供了絕大多數常用的按鍵碼的別名:
-
.enter
.tab
.delete
(捕獲“刪除”和“退格”鍵).esc
.space
.up
.down
.left
.right
有一些按鍵 (
.esc
以及所有的方向鍵) 在 IE9 中有不同的key
值, 如果你想支持 IE9,這些內置的別名應該是首選。
你還可以通過全局 config.keyCodes
對象自定義按鍵修飾符別名:
// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112
三、系統修飾鍵
可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。
-
.ctrl
.alt
.shift
.meta
<!-- Alt + C --> <input v-on:keyup.alt.67="clear"> <!-- Ctrl + Click --> <div v-on:click.ctrl="doSomething">Do something</div>
請注意修飾鍵與常規按鍵不同,在和 keyup
事件一起用時,事件觸發時修飾鍵必須處於按下狀態。換句話說,只有在按住 ctrl
的情況下釋放其它按鍵,才能觸發 keyup.ctrl
。而單單釋放 ctrl
也不會觸發事件。如果你想要這樣的行為,請為 ctrl
換用 keyCode
:keyup.17
。
.exact
修飾符
.exact
修飾符允許你控制由精確的系統修飾符組合觸發的事件。
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 --> <button v-on:click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的時候才觸發 --> <button v-on:click.ctrl.exact="onCtrlClick">A</button> <!-- 沒有任何系統修飾符被按下的時候才觸發 --> <button v-on:click.exact="onClick">A</button>
鼠標按鈕修飾符
-
.left
.right
.middle
這些修飾符會限制處理函數僅響應特定的鼠標按鈕。