好久没见了

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

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

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

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

  1. 在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知

    需求来源:向后台请求数据时后台挂掉了,后台响应就出现错误,不做处理界面就卡住了,这时需要在main.js中使用axios的响应拦截器在出现相应错误是给出提示.项目使用element-ui,就调用里面的 ...

  2. elementUI MessageBox弹框 <el-dialog>弹框如果出现input的type属性为password。项目中用到日期组件的地方会报错

    ElementUI:项目中如果用到MessageBox弹框的输入框input且type为password,以及用到<el-dialog>里面用到input且type为password.此时 ...

  3. 实现在vue中element-ui的el-dialog弹框拖拽

    参考:实现在vue中element-ui的el-dialog弹框拖拽 1.在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogD ...

  4. ui-element消息类型 MessageBox 弹框 type类型

    MessageBox 弹框 type字段表明消息类型,可以为success,error,info和warning

  5. easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法。$('#win').window()

    easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...

  6. element-- 修改MessageBox 弹框 中确定和取消按钮顺序

    需求:修改弹框中的 取消/确定按钮顺序,及头部和底部背景颜色; 原ui效果图 需求ui效果图 方法:对取消及确定按钮自定义类名,样式重写

  7. MessageBox 弹框

    模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示.确认消息和提交内容.  从场景上说,MessageBox 的作用是美化系统自带的 alert.confirm 和 prompt,因此适合展 ...

  8. Angular中sweetalert弹框的使用详解

    最近太忙了,项目中使用的弹框老板嫌太丑,让我们优化一下,我在网上找了一下,找到了sweetalert弹框,算是比较好看的弹框了.所以我就想办法将sweetalert用到项目中,在项目中引入sweeta ...

  9. javascript中的弹框

    大家都见过某度中的恶意广告,你关闭了又出来了!为何,JS来告诉你 效果猛戳此处 HTML <body> <h3 class="whiteColor">无法关 ...

随机推荐

  1. JavaScript match()方法和正则表达式match()

    先介绍参数为普通字符串的使用方式,此时match方法的返回值是存放首次匹配内容的数组.如果没有找到匹配结果,返回null.语法结构: 1 str.match(searchvalue)参数解析:(1). ...

  2. Codeforces #541 (Div2) - D. Gourmet choice(拓扑排序+并查集)

    Problem   Codeforces #541 (Div2) - D. Gourmet choice Time Limit: 2000 mSec Problem Description Input ...

  3. rank() partition by 排名次

    rank()排名 partition by分组与group by相比各有优势,在这里就省略100字.... 以下为案例: create table student -- 学生表(sid integer ...

  4. 北京大学冯哲清北学堂讲课day1

    贪心方案: 答案是第三个策略 二分的一个重点是有顺序性,只有满足这个件才可以二分判断区间,否则你得自己构造顺序. 洛谷跳石头同题: 首先,我们要最小化最大跳远距离 代码如下(此题) #include& ...

  5. 菜鸟学python之程序初体验

    作业来源:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2684 1.字符串操作: 解析身份证号:生日.性别.出生地等. def id ...

  6. keras04 - 阿狗阿猫识别 面向对象编程

    参考:https://www.bilibili.com/video/av32756783

  7. PHP程序员的成长路线

    作为一名PHP程序员,从你入门到现在我相信也学了很多东西,但是有的PHP程序员却是还在第一阶段,那么作为初级PHP程序员我们应该如何弥补自己的不足往中级阶段或者高级阶段发展呢?下面小编就为大家梳理了一 ...

  8. 总结idea几个实用的快捷键

    Ctrl+R,替换文本Ctrl+F,查找文本 Ctrl+shit+R,全局替换文本Ctrl+shit+F,全局查找文本 Ctrl+Alt+L,格式化代码Alt+Insert,可以生成构造器/Gette ...

  9. 如何在django视图中使用asyncio(协程)和ThreadPoolExecutor(多线程)

    Django视图函数执行,不在主线程中,直接 loop = asyncio.new_event_loop() # 更不能loop = asyncio.get_event_loop() 会触发 Runt ...

  10. 前端可视化项目流程,涉及three.js(webGL),3DMax技术,持续更新

    最近在做一个可视化展示的项目,记录一下流程: 建模,模型来源,可以参考沙盘展示类项目,自己建模或者拼装其他源模型(本人以前是3D建模师,可以应付一些简单的场景) 有效模型导入到web端,这里采用的ob ...