vue.js - Vuejs - 处理按键并单击表格行

Question

我如何捕获按键并点击 tr 元素？

我需要实现一个可以处理单行选择或多行选择的表。

现在，我尝试绑定(bind)键ctrl:

Vue.directive('on').keyCodes.ctrl = 17;

但是，如果我使用 @keyup.ctrl 确定这不起作用，因为我需要检查当用户单击一行时按下的是哪个键。

Answer 1

点击事件包含指示在点击期间是否按下了 Control、Shift、Alt 或 Meta 键的属性。

new Vue({
  el: 'body',
  data: {
    controlled: false,
    shifted: false,
    meta: false,
    alted: false
  },
  methods: {
    clicked: function(event) {
      console.debug(event);
      this.controlled = event.ctrlKey;
      this.shifted = event.shiftKey;
      this.meta = event.metaKey;
      this.alted = event.altKey;
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<button @click="clicked">Click me!</button>
<div v-if="controlled">Control was pressed</div>
<div v-if="shifted">Shift was pressed</div>
<div v-if="alted">Alt was pressed</div>
<div v-if="meta">Meta was pressed</div>