按鍵修飾符

在 PC 端開發時, 我們常常會遇到類似的需求, 比如用戶按下 enter 鍵時提交表單, 沒有用按鍵修飾符時, 我們可能會去監聽鍵盤事件, 根據 keyCode 的值加以判斷

Vue 新增按鍵修飾符和系統修飾符來處理類似事件

/** 提交表單 */<template>  <div class="demo">    電話號碼:    <input type="text" placeholder="請輸入電話號碼" v-model="phone" @keyup.13="handleSubmit" />  </div></template><script>export default {  data () {    return {      phone: '' // 電話號碼    }  },  methods: {    // TODO 提交電話號碼    handleSubmit () { alert(this.phone) }  }}</script>

要記住所有的 keyCode 值比較困難, 所以 Vue 為常用的按鍵提供了別名

<input type="text" placeholder="請輸入電話號碼" v-model="phone" @keyup.enter="handleSubmit" />

常見按鈕別名

enter tab delete esc space up down left right

如果這些別名不能滿足需要的話, 可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名

Vue.config.keyCodes.x = 88

你也可以將 keyboardEvent.key 暴露的按鍵名轉換為 kebab-case 來作為修飾符, 以下兩種修飾符都能觸發 handleSubmit 事件

<input type="text" placeholder="請輸入電話號碼" v-model="phone" @keyup.right="handleSubmit" /><input type="text" placeholder="請輸入電話號碼" v-model="phone" @keyup.arrow-right="handleSubmit" />

系統修飾鍵

有時候我們需要配合系統修飾鍵共同觸發事件, 這里要注意的是, 單獨按下系統修飾鍵是不會觸發相應事件的

系統修飾鍵包含 ctrl alt shift meta 鍵, 對于不同的鍵盤, 這四個系統修飾鍵對應各有不同, 對于 mac 系統鍵盤, meta 鍵對應 command 鍵, 在 windows 系統鍵盤中對應 ⊞ 鍵

在下面的例子中, 當 control 和 v 鍵共同作用時, 才會觸發 handleSubmit 事件

<input type="text" placeholder="請輸入電話號碼" v-model="phone" @keyup.ctrl.v="handleSubmit"/>

有時候我們需要精確匹配到按鍵組合時才觸發相應事件, 在下面的例子中, 當且僅當 control 和 v 鍵共同作用時, 才會觸發 handleSubmit 事件

<input type="text" placeholder="請輸入電話號碼" v-model="phone" @keyup.ctrl.v.exact="handleSubmit"/>

總結

以上所述是小編給大家介紹的Vue 按鍵修飾符處理事件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！