在VueJs中按功能处理按键 [英] Handle key press by function in VueJs
问题描述
在我的组件中，我使用的是 VueStrap 的模态，如下所示:
<modal-window v-model="show";v-on:keyup="keyHandler($event)";@ok="提交()";@cancel="取消()";@closed="close()";... >...</modal-window>...</模板><脚本>...方法: {keyHandler(事件){控制台日志(事件)；}},...我想在打开该模态时处理按键按下并确保在按下输入时提交模态或在按下 esc 时关闭模态.
我添加了自定义函数 keyHandler，不幸的是它从未被触发.你能告诉我如何修复代码来处理那个函数中的按键吗?或者什么时候关闭和提交 vue 表带模式的更好方法我将不胜感激.谢谢.
您可以将您的事件处理程序附加到 window，这样您就可以接收所有关键事件并根据您的 modal 状态采取相应的行动:
Vue.component('modal', {模板:'<div>测试模态</div>',});新的 Vue({el: "#app",创建(){window.addEventListener('keydown', (e) => {if (e.key == 'Escape') {this.showModal = !this.showModal;}});},数据: {showModal: 真}})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script><div id="应用程序"><modal v-show="showModal"></modal>in my component I am using VueStrap's modal like this:
<template>
<modal-window v-model="show" v-on:keyup="keyHandler($event)" @ok="submit()" @cancel="cancel()" @closed="close()" ... >
...
</modal-window>
...
</template>
<script>
...
methods: {
keyHandler (event) {
console.log(event);
}
},...
</script>
I want handle key press when that modal is opened and ensure submit modal when enter pressed or close modal when esc pressed.
I added custom function keyHandler which is unfortunately never fired. Can you tell me how to fix code to handle key press in that function? Or when is better way how to close and submit vue strap modal I will be grateful for advice. Thank you.
You can attach your event handler to window, that way you can receive all key events and act accordingly depending on your modal's state:
Vue.component('modal', {
template: '<div>test modal</div>',
});
new Vue({
el: "#app",
created() {
window.addEventListener('keydown', (e) => {
if (e.key == 'Escape') {
this.showModal = !this.showModal;
}
});
},
data: {
showModal: true
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<modal v-show="showModal"></modal>
</div>
这篇关于在VueJs中按功能处理按键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
