如何为element-ui的dialog组件添加键盘事件

Question

问题描述

想要为dialog绑定事件，用来监听用户的左右键实现左右切换

问题出现的环境背景及自己尝试过哪些方法

我尝试为el-dialog添加@keyup.enter.native="changDialog"先做尝试，发现没有效果，left/right事件也无法监听

相关代码

<el-dialog title="title"
                 class="detail_dialog"
                 @keyup.native.37="changDialog"
                 :visible.sync="dialogTableVisible"
                 :modal-append-to-body='false'
                 :before-close="changeDialogState"
                 width="1045px"
                 top="10px">
</el-dialog>

你期待的结果是什么？实际看到的错误信息又是什么？

想知道为什么.native无法覆盖，并且无法监听事件，如果想要实现监听用户键盘事件该如何，感谢回答。

Answer 1

不妨试试给它加个 tabindex：

<el-dialog
     title="title"
     tabindex='1'
     class="detail_dialog"
     @keyup.native.37="changDialog"
     :visible.sync="dialogTableVisible"
     :modal-append-to-body='false'
     :before-close="changeDialogState"
     width="1045px"
     top="10px">
</el-dialog>

Answer 2

把事件绑在 body 上面，元件没有焦点不会触发事件。