layer 弹窗,enter 、esc 按键监听确定、取消事件

最近做新项目,测试提出,要给系统所有的弹窗设置enter 按键的确定绑定。 由于之前做项目的时候没有考虑这方面, 所以页面模块有很多弹窗,心想着这也不能一个个的增加监听事件啊,而且弹窗的类型还都不一样,所以就想着有没有类似公共方法的调用的方式。

今,把此方法记录下来。 包括事件监听,以及简单的全局调用

代码如下:

javascript 复制代码
const enterEsc_event = {
                success: () => {
                    //enter键触发确定
                    this.enterConfirm = (event) => {
                        let codeVal = event.which;
                        if(codeVal == 13){
                            $('.layui-layer-btn0').click();
                            return false;
                        }
                    };
                    $(document).on('keydown', this.enterConfirm);
                    //esc键触发取消
                    this.escQuit = (ev) => {
                        let code_val = ev.which;
                        if(code_val == 0x1B){
                            $('.layui-layer-btn1').click();
                            return false;
                        }
                    };
                    $(document).on('keydown', this.escQuit);
                },
                end: () => {
                    $(document).off('keydown', this.enterConfirm);
                    $(document).off('keydown', this.escQuit);
                }
            };

其中,把 layer 的方法success 和 end,定义在公共文件中的一个叫enterEsc_event 的对象里面。 然后再调用它

调用环境一:

javascript 复制代码
 let det = layer.confirm('确认删除吗?', enterEsc_event, function(){});

调用环境二:

javascript 复制代码
var indexL = layer.confirm("您确定要退出登录吗?",{
                    title: '退出登录',
                    success: enterEsc_event.success,
                    end: enterEsc_event.end
                },function(layero, index){
                });

环境二是考虑到你可能要对这个弹窗写其他的一些属性和方法的情况。

以上,本文内容结束! 如有建议,请留言。

(什么时候能发财,然后再去三亚呢....)

作者:麦田_426

链接:https://www.jianshu.com/p/7048865e43ce

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关推荐
嵌入式郑工1 小时前
LINUX驱动开发: 设备和驱动是怎么匹配的?
linux·运维·服务器
软件技术NINI2 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
rain bye bye2 小时前
calibre LVS 跑不起来 就将setup 的LVS Option connect下的 connect all nets by name 打开。
服务器·数据库·lvs
郭式云源生法则2 小时前
归档及压缩、重定向与管道操作和综合使用,find精确查找、find处理查找结果、vim高级使用、vimdiff多文件使用
linux·运维·服务器
小池先生3 小时前
服务请求出现偶发超时问题,经查服务本身没问题,问题出现在nginx转发。
运维·服务器·nginx
mapbar_front3 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie3 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
asdfg12589633 小时前
如何判断一个地址是否可以用作主机 IP 地址?
服务器·网络·tcp/ip
李鸿耀3 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻3 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js