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

来源:简书

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

相关推荐
fruge2 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
JaneJiazhao7 分钟前
HTTPSOK:SSL/TLS证书自动续期工具
服务器·网络协议·ssl
neter.asia10 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫11 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年30 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_31 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891133 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾35 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking35 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu37 分钟前
前端 Canvas 绘画 总结
前端