好久没见了
在项目中遇到一个小小的需求，总结了一下！
详细我就不介绍了，相信大家用过的话，很了解。详见文档----------->
http://element-cn.eleme.io/#/zh-cn/component/message-box#messagebox-dan-kuang
项目需求——关于elementui中messagebox弹框的取消键盘触发事件(enter,esc)关闭弹窗的解决方法（也就是标题）
- 我们在接触或者是学习使用一个库，或者插件。通常我们最先看的就是文档。
- 如果遇到某个相关部分的知识，我们不要忘记原生方法。很多封装的库和方法都是基于这门语言的原生。万变不离其宗。
- 好了，不说了。直接贴代码。
我们会发现，弹窗关闭之前会有一个回调方法。这就是重点！
三个参数，详解见上面。
我们的需求是在弹窗之后，取消默认封装的点击enter,esc键盘事件的触发从而关闭弹窗，执行事件。
打印一下吧：
我们发现，确认按钮和enter按钮执行的action执行的都是confirm。done方法也一样，主要控制弹窗的关闭。
所以我们就需要在vuecomonent实例里面做文章了。
刚刚说beforeclose中第二个参数指向的所在vue实例。所以我们可以打印一下里面的对象和属性。
我们找到所在vue实例里面的绑定元素。也就是触发的那个事件的元素。也就是事件元素。
打印如下：
用原生js添加点击事件，通过鼠标点击事件和键盘enter事件来触发它，然后打印数据。记得e做兼容
我们发现在不同的点击效果之后，把数据做对比。这里不做详细输出对象和属性的介绍。
我们会发现，键盘事件和鼠标事件e中区别。有很多参数值是不一样的。
当然还会有其他参数的不同都可以作为判断对象。这里只做列举。
操作过的同学会发现，如下-------
细心的同学就会发现，鼠标事件的detail属性值会变化，而enter事件点击一直是0。
那么：我们就可以利用这一点解决我们的需求。
好了，完整代码贴上。
可能我这个方法比较麻烦，不过你可以试试别的方法，比如全局监听键盘事件，和鼠标事件一起做对比。
做到正确的解决需求。
end
如对本文有疑问， 点击进行留言回复！！
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例
CTF 刷题记录（一） 白云新闻搜索（手动与自动化SQL注入）
javascript如何使用函数random来实现课堂随机点名方法详解
我要评论
网友评论