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

ok0602023-10-14 15:02

最近做新项目，测试提出，要给系统所有的弹窗设置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

来源：简书

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