zoukankan      html  css  js  c++  java
  • layui采坑记录 (上卷)QUQ

    layui采坑记录

    因为layui拥有者非常强大的兼容性,所以大部分政府以及部分需要对ie进行兼容的项目都会将layui框架作为首选框架。 不过呢。这个框架后台写起来速度是很快,但是呢,因为是个框架,所以使用这个框架的时候很多地方都会非常蛋疼。

    表单回显

    在获取到数据以后渲染表单的时候,如果在表单最外层容器没有设置class,那么在回显的时候单选框和复选框,数据无法渲染,即使使用了form.render()还是没什么卵用,但是呢,这个框架的神奇之处也有,那就是form.render()写的次数多了也会导致部分表单回显出错,所以如果大家再回显表单的时候发现了这种情况,不妨看看这个form.render()写了多少个,还有就是form.render()是一个异步方法,于是乎我加了个setTimeout,。。。。(大佬们求指教)

    layer弹出层

    layui弹出层有一个很严重的问题,那就是close和layer.msg函数

    var index = layer.open({
        type: 1,
        title: '标题',
        area: '55%',
        content: $('#id').html(),
        success:function(){
            // 弹窗成功时候的回调函数
        }
    })
    
    layer.msg('弹出状态')
    layer.close(index) 
    

    按照常理应该是弹出'弹出状态'这个消息以后关闭弹出层,结果却是关闭了弹出状态的这个msg消息,为啥呢,应为这个index此时存储的就是当前弹出层的zindex层级,而msg又生成了一个弹出层,但是js解析是先解析变量的,所以在这个弹出层出来以后,所对应的index并没有得到更新,所以。。。。希望官方能修复这个bug

    弹出层内容溢出

    layui框架的长度单位是px也就是说如果在小一点的屏幕上,你弹出层的内容过于丰富那么在小屏幕上内容就会溢出,但是当你放到大一点的屏幕上,拖拽你的弹出层依旧会发生这个问题,所以只要禁止这个缩放,就能解决这个问题

    layer.open({
         type: 1,
        title: '标题',
        area: '55%',
        content: $('#id').html(),
        success:function(){
            // 弹窗成功时候的回调函数
        },
        resize:false // layer.open属性resize表示缩放 默认为true false为关闭缩放
    })
    

    id冲突bug

    layer在模块切换的时候并没有直接销毁dom,所以上一个页面的id如果和下一个页面的id取得一模一样,就会发生冲突,出现报错,所以使用这个系统的时候一定要避免这个命名问题推荐使用小驼峰命名法 createName这种;

    table数据表格页码重置问题

    在layui的数据表格使用的时候有个问题,那就是当limit页码翻页了以后table.reload(#table表名,{where:条件})方法页码不会发生重置,这是应为table.render()有一个参数没有设置,但是默认是传的当前页

     table.reload('lookDetail', {   //方法渲染表格里的属性 ID
      page: {
        curr: 1  //设置当前页码
            }
    });
    

    以上就是我头一次写layui遇见的一些坑,呜呜呜~~~难受。。。我喜欢写vue.....QUQ

  • 相关阅读:
    使用栈检测括号是否成对出现
    java多线程基本概述(十七)——原子性和易变性
    java多线程基本概述(十六)——捕获异常
    java多线程基本概述(十五)——DaemonThread
    java多线程基本概述(十四)——Thread内部类的几种写法
    java多线程基本概述(十三)——Executor
    java多线程基本概述(十二)——多线程与单例
    java多线程基本概述(十一)——ReadWriteLock
    java多线程基本概述(十)——Condition
    java多线程基本概述(九)——Lock(3)
  • 原文地址:https://www.cnblogs.com/wangjiahui/p/12203816.html
Copyright © 2011-2022 走看看