vue.js - 仅在按下按键时处理 VueJS 事件

Question

我使用第三方库提供的VueJS组件，它有自己的事件。我可以像往常一样使用“v-on”指令并指定有趣的事件名称来处理此类事件，如下所示:

<TheComponent v-on:itemchanged="handler"/>

但是只有当按下 CTRL 键发生“itemchanged”时才可以运行处理程序吗？当未按下 CTRL 键时，处理程序不应运行。

我尝试使用 click.crtl 和 keydown.ctrl 但没有成功。

Answer 1

Is it possible to run handler only when 'itemchanged' occurs with CTRL key pressed?

假设 itemchanged 是由 change 事件触发的:不，不是没有解决方法。与键盘和鼠标事件不同，change 不包含键盘信息。您需要独立跟踪 ctrl 按键的状态，因为 JavaScript has no way of testing whether a key is down在这些事件之外。

插件

实现它的一种封装方法是使用插件:

const pluginKeypresses = function(Vue) {
  const keyPresses = {
    Control: false
  }
  window.onkeyup = function(e) { keyPresses[e.key] = false; }
  window.onkeydown = function(e) { keyPresses[e.key] = true; }
  Vue.prototype.$keyPresses = Vue.observable(keyPresses);
}
Vue.use(pluginKeypresses);

_{注意:此处的 e.key 检测是截至 11/2020 的当前标准，但为 not yet fully supported by IE and some other browsers 。如果 IE 对您很重要，请更改 key detection implementation根据您的喜好。}

使用

您可以从应用程序中的任何位置测试 this.$keyPresses.Control ( bool 值)

Demo