Vue.js слушает событие только когда топ - PullRequest
Новая
       28

Vue.js слушает событие только когда топ

0 голосов
/ 02 июня 2018

Я создал пользовательский компонент 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;
    });
}

...

PIN code input

Заранее спасибо.

1 Ответ

0 голосов
/ 02 июня 2018

Если оболочкой вашего компонента является 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/

...