Vue.js仅在顶部时监听事件

Question

我为触摸屏构建了一个自定义PIN码输入Vue组件，它没有任何实际输入，只有按钮。我的代码中有可自定义的键映射，对于桌面使用我也希望能够使用普通键盘进行输入。

然而，当我有多个引脚输入时，例如在页面和模态顶部，键击当然会进入每个组件，因为我已经安装了所有组件。

所以我试图找到一种只有当前聚焦组件接受键盘输入的方法。触摸屏上的组件自己的按钮工作正常，没有任何问题。

...

data() {
    return {
        value: '',
        keys: [
            { name: '9', code: 'Digit9'},
            { name: '8', code: 'Digit8'},
            { name: '7', code: 'Digit7'},
            { name: '6', code: 'Digit6'},
            { name: '5', code: 'Digit5'},
            { name: '4', code: 'Digit4'},
            { name: '3', code: 'Digit3'},
            { name: '2', code: 'Digit2'},
            { name: '1', code: 'Digit1'},
            { name: '0', code: 'Digit0'},
        ]
    };
},

mounted() {
    window.addEventListener("keypress", e => {
        let result = _.find(this.keys, ['code', e.code]); // Lodash
        if (result) this.value = "" + this.value + result.name;
    });
}

...

提前致谢。

Answer 1

如果您的组件的包装器是div，则可以添加tabindex属性，以便div可以接收keypress事件

然后您可以将keypress事件添加到this.$el而不是全局窗口

Vue.component('greeting', {
  template: '<div tabindex="1">Welcome to coligo!</div>',
  props: ['name'],
  mounted() {
    this.$el.addEventListener('keypress', (e) => {
      console.log(this.name, e)
    })
  },
  methods: {
  }
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app'
});

演示https://jsfiddle.net/ittus/6b2ru73t/