在 VueJs 中按功能处理按键

Posted 2023-02-23

【中文标题】在 VueJs 中按功能处理按键

【英文标题】：Handle key press by function in VueJs

【发布时间】：2018-10-27 23:19:05

【问题描述】：

在我的组件中，我正在使用 VueStrap 的模态，如下所示：

<template>
    <modal-window v-model="show" v-on:keyup="keyHandler($event)" @ok="submit()" @cancel="cancel()" @closed="close()" ... >
       ...
    </modal-window>
 ...
</template>
<script> 
    ...
    methods: 
       keyHandler (event) 
           console.log(event);
       
    ,...
</script>

我希望在打开该模态时处理按键，并确保在按下输入时提交模态或在按下 esc 时关闭模态。

我添加了自定义函数keyHandler，不幸的是它从未被触发。你能告诉我如何修复代码以处理该功能中的按键吗？或者什么时候更好地关闭和提交 vue strap modal 我将不胜感激。谢谢。

【参考方案1】：

您可以将您的事件处理程序附加到window，这样您就可以接收所有关键事件并根据您的模态状态采取相应的行动：

Vue.component('modal', 
  template: '<div>test modal</div>',
);

new Vue(
  el: "#app",
  created() 
    window.addEventListener('keydown', (e) => 
      if (e.key == 'Escape') 
        this.showModal = !this.showModal;
      
    );
  ,
  data: 
    showModal: true
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <modal v-show="showModal"></modal>
</div>

【讨论】：

我很抱歉，但我现在发现 enter 和 esc 没有被处理，就在我输入的时候......其他键每次都有效，你知道应该是什么问题吗？

也许您在输入中捕捉到事件并停止传播..

或者您可能正在使用keypress，请尝试改用keydown

这行得通，但我必须在“已安装”而不是“创建”上添加事件侦听器。在我的项目中“创建”时，窗口对象尚不存在

或者将 window.addEvent.... 包装在 $nextThick 中

【参考方案2】：

最简单的方法

<input v-on:keyup.13="whatkey()" type="text"> <br>

查找是否按下了 enter 键，然后触发一个名为 whatkey 的方法。

【参考方案3】：

或者，您可能需要考虑在 Vue 中使用 v-hotkey 指令进行键输入（docs、github）。如果您必须考虑几个不同的关键输入，这将使您的代码相对干净和简单。

1。安装它：

npm i --save v-hotkey

让 Vue “使用”它：

从 "v-hotkey" 导入 VueHotkey; Vue.use(VueHotkey);

3。将它应用到您的 Vue 组件中，如下所示：

<template>
    <modal-window ... v-hotkey="keymap">
       ...
    </modal-window>
</template>
<script>
  ...
  data() 
    return 
      showModal: false
    ;
  ,
  computed: 
    keymap() 
      return 
        "esc": this.toggleModal
      ;
    
  ,
  methods: 
    toggleModal() 
      this.showModal = !this.showModal;
    
  
</script>