Vue - 按鍵修飾符 && 系統修飾符

Ozzie發表於2019-12-17
Vue

本文簡述了Vue中的按鍵修飾符

引入樣例

  1. 在生活中，常常有這樣的場景：按下Enter提交，或者按下Esc退出全屏等等，這些都是與鍵盤有關的操作
  2. 同理，我們在Vue中，也可以透過在v-on新增按鍵修飾符將某個按鍵對映到對應的事件上，用於監聽按鍵事件
  3. 舉慄引入： 
    <div id="app">
    序號：<input type="text" v-model="idValue" />
    車名：<input type="text" v-model="nameValue" @keyup.enter="add">
    <p v-for="item in list">
        序號：{{item.id}}  車名：{{item.name}}
    </p>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            idValue: '',
            nameValue: '',
            list: [
                {id:1,name:'奧迪'},
                {id:2,name:'賓士'},
            ]
        },
        methods: {
            add(){
                this.list.unshift({
                    id: this.idValue,
                    name : this.nameValue
                })
            }
        }
    })
</script>
    • 那麼，結果就是，我們輸入id與name，按下Enter，即可將輸入的內容新增到list中並透過v-for顯示出來
  4. 我們詳細分析一下剛才的流程：
    • 我們在第二個<input>框裡面新增了keyup事件，即鍵盤按下抬起時觸發
    • 後面的.enter即為按鍵修飾符，定義哪個按鍵會觸發該事件（這裡是回車觸發）
    • 觸發的事件反映在add()方法上，即回車就觸發add()方法

按鍵修飾符別名

  1. 其實，除了.enter以外，Vue還定義了許多按鍵修飾符，列舉如下：
    • .enter Enter鍵
    • .tab tab鍵
    • .delete 刪除（或退格）鍵
    • .esc Esc鍵
    • .space 空格鍵
    • .up ↑鍵
    • down ↓鍵
    • left ←鍵
    • right →鍵
  2. 其實，你還可以透過全域性config.keyCodes物件，來實現：自定義鍵盤修飾符別名
  3. 注：不管是使用鍵盤名稱還是使用鍵盤碼都要防止快捷鍵的衝突，快捷鍵衝突的時候會不起作用。

關於按鍵碼

  1. 在之前，我們不僅可以使用按鍵修飾符別名，還可以使用按鍵碼來作為修飾符使用：
    • 比如f2的按鍵碼為113，那麼我們可以透過@keyup.113="..."來使用該按鍵修飾符
  2. 但是在官方文件中，已經明確提到：

    keyCode的事件用法已經被廢棄了並可能不會被最新的瀏覽器支援

  3. 所以，建議的是使用按鍵修飾符別名...

系統修飾符

  1. 僅在按下相應按鍵時才觸發滑鼠或鍵盤事件的監聽器，簡單地說就是，配合其他按鍵才能使用
  2. 其修飾符有：
    • .ctrl
    • .alt
    • .shift
    • .meta

  3. 例如：

    <!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="...">...</div>
  4. .exact修飾符
    • .exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件 
      <!--  Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章