Как поймать событие ввода на элементе, не входящем в vue?

#vue.js #vuejs2 #vue-component

#vue.js #vuejs2 #vue-компонент

Вопрос:

У меня есть кнопка подтверждения, которая также должна быть вызвана событием ввода.

В принципе, я надеялся, что это сработает:

 lt;someComponent @keyup.enter="handleConfirm" /gt; ... methods: {  handleConfirm(event) {  console.log("works")   } }

Но это не так. По-видимому, этот подход работает только с полями ввода.

Как я могу прослушать событие keyup в Vue для любого элемента/компонента?

ОТРЕДАКТИРУЙТЕ, чтобы уточнить: Любой элемент/компонент даже не в фокусе.

Ответ №1:

Событие click уже запускается с помощью клавиши ENTER (оно также запускается с пробелом в некоторых браузерах, таких как Chrome для рабочего стола). Итак, вашему коду нужен только @click=»CallEvent», и все работает хорошо, так как фокус уже сосредоточен на кнопке

Если вы хотите, чтобы любой ВВОД запускал кнопку, даже если она не находится в фокусе, вам следует привязать событие к объекту окна, которое может быть выполнено внутри смонтированного обработчика

 var app = new Vue({  el: "#app",  methods: {  callEvent() {  console.log("Event called");  }  },  mounted() {  window.addEventListener('keyup', function(event) {  if (event.keyCode === 13) {   app.callEvent();  }  });  } });

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"gt;lt;/scriptgt; lt;div id="app"gt;  lt;buttongt;Enterlt;/buttongt; lt;/divgt;

1. Это последний случай, поэтому любое событие ввода. Это работает, так что у вас есть ответ, чтобы технически решить проблему. Сказав это: Нет ли способа прослушать событие ввода без использования окна, но с использованием самого vue? Если нет, я отмечу ваш ответ как правильный через несколько дней.

Ответ №2:

Вы можете сделать это: lt;someComponent @keyup.enter="handleConfirm($event)" /gt;

 methods: {  handleConfirm(event) {} }