关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法

好久没见了

在项目中遇到一个小小的需求，总结了一下！

详细我就不介绍了，相信大家用过的话，很了解。详见文档----------->

http://element-cn.eleme.io/#/zh-cn/component/message-box#messagebox-dan-kuang

项目需求——关于elementui中messagebox弹框的取消键盘触发事件(enter,esc)关闭弹窗的解决方法（也就是标题）

 

1. 我们在接触或者是学习使用一个库，或者插件。通常我们最先看的就是文档。
2. 如果遇到某个相关部分的知识，我们不要忘记原生方法。很多封装的库和方法都是基于这门语言的原生。万变不离其宗。
3. 好了，不说了。直接贴代码。

 

 

 

 我们会发现，弹窗关闭之前会有一个回调方法。这就是重点！

三个参数，详解见上面。

 

我们的需求是在弹窗之后，取消默认封装的点击enter,esc键盘事件的触发从而关闭弹窗，执行事件。

 

打印一下吧：

 

 

我们发现，确认按钮和enter按钮执行的action执行的都是confirm。done方法也一样，主要控制弹窗的关闭。

所以我们就需要在vuecomonent实例里面做文章了。

刚刚说beforeclose中第二个参数指向的所在vue实例。所以我们可以打印一下里面的对象和属性。

我们找到所在vue实例里面的绑定元素。也就是触发的那个事件的元素。也就是事件元素。

打印如下：

 

用原生js添加点击事件，通过鼠标点击事件和键盘enter事件来触发它，然后打印数据。记得e做兼容

 

我们发现在不同的点击效果之后，把数据做对比。这里不做详细输出对象和属性的介绍。

 

我们会发现，键盘事件和鼠标事件e中区别。有很多参数值是不一样的。

 

 

当然还会有其他参数的不同都可以作为判断对象。这里只做列举。

操作过的同学会发现，如下-------

细心的同学就会发现，鼠标事件的detail属性值会变化，而enter事件点击一直是0。

那么：我们就可以利用这一点解决我们的需求。

好了，完整代码贴上。

 

 

可能我这个方法比较麻烦，不过你可以试试别的方法，比如全局监听键盘事件，和鼠标事件一起做对比。

做到正确的解决需求。

 

end