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


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

    1. const enterEsc_event = {
    2. success: () => {
    3. //enter键触发确定
    4. this.enterConfirm = (event) => {
    5. let codeVal = event.which;
    6. if(codeVal == 13){
    7. $('.layui-layer-btn0').click();
    8. return false;
    9. }
    10. };
    11. $(document).on('keydown', this.enterConfirm);
    12. //esc键触发取消
    13. this.escQuit = (ev) => {
    14. let code_val = ev.which;
    15. if(code_val == 0x1B){
    16. $('.layui-layer-btn1').click();
    17. return false;
    18. }
    19. };
    20. $(document).on('keydown', this.escQuit);
    21. },
    22. end: () => {
    23. $(document).off('keydown', this.enterConfirm);
    24. $(document).off('keydown', this.escQuit);
    25. }
    26. };

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

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

    调用环境二:

    1. var indexL = layer.confirm("您确定要退出登录吗?",{
    2. title: '退出登录',
    3. success: enterEsc_event.success,
    4. end: enterEsc_event.end
    5. },function(layero, index){
    6. });

    环境二是考虑到你可能要对这个弹窗写其他的一些属性和方法的情况。
    以上,本文内容结束! 如有建议,请留言。
    (什么时候能发财,然后再去三亚呢....)


    作者:麦田_426
    链接:https://www.jianshu.com/p/7048865e43ce
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 相关阅读:
    【堆的应用】细说Top-K问题
    MySQL复合查询
    离线数仓 (三) --------- 用户行为数据生成模块
    Thrift快速入门和简单示例
    C#上位机序列10: Winform上位机通用框架
    SDP协议介绍
    MySQL 的 limit 分页查询及性能问题
    GIT相关内容总结
    面试题整理
    项目管理之知识管理
  • 原文地址:https://blog.csdn.net/ok060/article/details/133824660