关于你遇到的 layui 的很多“问题” 的归纳

分享 未结 精帖
47 7903
吃辣条的小龙虾
悬赏:20飞吻
首先,layui很棒,个人非常喜欢。看完它之后,我由衷的感谢它的诞生。感谢 @贤心 的默默付出,并将其开源。 [太开心] @贤心 辛苦了。
其次,最近在社区看到一些带节奏的人,搁那瞎比比,不会用layui的模块,就自己发牢骚,说这不好,那不好,小弟只想说:既然你觉得它那么不如意。干嘛非要用呢?这些人嘴上说着不要,可身体却诚实的很呢? [怒]

小弟是一位刚入门的前端仔,因为公司的项目是用layui框架1.0的版本开发的,自己也接触这个框架有一段时间了,不说多熟悉吧,但还是把文档很仔细的看了一遍的,2.0的小弟没有好好的读一遍,只是偶尔写自己的东西时,去看一下,以后会自己补充时间去好好看一遍,把新特性实践一下,[鼓掌].

小弟也经常逛社区,看到大家的问题,自己亲身经历过遇到的问题,能解答的都会指出来,让小伙伴们少踩坑,但归根结底发现,有的小伙伴遇到的问题都是自己不仔细看文档而发生的,所以在这里,给刚入此框架的小伙伴的建议:[太开心] [太开心]:---------请仔细看文档-----仔细看文档------- 仔仔细细看文档.-----------切记,使用它的模块一定要仔细看文档.

下面就给刚入layui的分享下你可能会遇到的坑:2.0更新请各位自己看文档,变化最大的应该就是数据表格和日期插件:请走文档路线 [害羞]
首先引入文件咱就不说了:不过注意模块化引入和layui.all.js的不同,模块化引入也称按需引入,如果只引用layui.js,那么当你用到它的(内置模块)的时候,比如:表单(form模块),tab选项卡(element模块),(分页laypage模块),(时间控件laydate),(模板laytpl),等一些模块的时候,(用jquery的小伙伴注意,layui自带jquery的一个版本(2.0以下的),使用jquery的方法就是var $ = layui.jquery,就可以使用jquery的语法了)

具体模块参照文档的说明:----内置模块----这一块的介绍,要先引入这些模块,方法是,layui.use(''模块名字'),然后定义一个模块名称,看个人需求直接配置参数就可以了,如果你是引入layui.all.js的话,就不用写layui.use了,直接定义变量接受模块,直接使用就可以了,比如var form = layui.form(); 然后监听表单的话就直接form.on('select(filter)',function(data){});

这里会有一些问题[思考] ,小伙伴们会遇到:(小弟直说自己用到的模块),前边的ui就不说了,基本你不会遇到什么问题.

form表单模块
  • 如果是从后台接口动态获取的数据,渲染的表格中时,请记得获取完数据后渲染一下数据,form.render(),不然你看不到数据在页面中,切记渲染.
  • 监听表单某一个控件,如果你用单纯的js写,是不可以的,layui就知道你要对某一个控件进行动态操作,特意做了一些方法,比如监听事件,当你要监听获取某一个表单里的控件时,如下拉框,选择框,时,请适用form,on(),方法,具体介绍请看,form表单的动态操作方法,这里基本满足你的大部分需求.它自带很多验证功能,如必填啊,正则啊,等等功能,不用自己再写验证了,当然,如果你有特殊的需求,你也可以自己定义验证规则,这点,作者已经想到了[亲亲] .
特别提示:使用表单模块的,请仔细看文档,特别是动态渲染,和监听事件,自定义验证规则-

element 模块
elemet模块是在使用导航和tab选项卡的时候必须要引入的,layui.all.js的请无视.[右哼哼] ,使用此模块估计小伙伴们都在自己写后台管理系统的时候遇到了很多问题,
首先,使用前还是先唠叨一下,请仔细看完文档说明;
  • 这个模块里,导航数据如果是动态获取添加的的,记得获取完渲染一下数据,不然跟表单一样,看不到数据
  • 次模块只支持到2级导航,3级的暂时不支持,大神可以自己源码扩展
  • 导航是可以监听的,即动态操作导航,不要写js事件了,自己监听导航后,写回调函数就可以了,方法element.on();
  • 有些小伙伴会问改皮肤,请自己定义layui-this的颜色,覆盖原来的就可以了.
  • 导航监听的时候,你可能会用到一些判断,比如跟iframe同用时,转换不同的src路径;需要用到lay-id这个属性,进行一些判断
  • 监听选项卡,它的删除,添加功能,大部分的后台系统会用到,比如点击导航后添加到右边的tab选项卡里
  • 再添加tab选项卡
    element.tabAdd('demo', {
    title: '选项卡的标题'
    ,content: '选项卡的内容' //支持传入html
    ,id: '选项卡标题的lay-id属性值'
    });
    这里的content不只可以支持内容,有的小伙伴写了.html文件发现不行是吧,但是可以放iframe的,不过,你需要写成字符串的形式"<iframe src="url">",这样是可以跳转页面的[阴险] ,小弟也是试了好多方法,终于实现了
    具体的使用,请仔细看常用元素操作文档说明.
使用element模块的,请仔细看文档,特别是动态渲染导航数据,和监听事件,导航的路径切换,都需要监听事件配合,不然你如果写href="url"是不可以的哦[爱你]

layer 弹模块
这个模块小弟真是喜欢的紧啊,[太开心] ,[太开心] ,这也许不是最好的,但却是最漂亮,实用的
首先,此模块可以单独使用,你可以直接去layer官网下载.--地址----去文档
1.配置参数,我就不说了,文档上有;
2.说下btn按钮组合,它有回调函数[鼓掌] ,yes,success,后的回调,可以让你处理一下数据到接口,或者做些其它的事,切记点击按钮后的回调函数[偷笑] .
3.这里是涉及到iframe层,如果在子页面关闭父页面请,请用parent,还有操作子页面操作父页面的话,记得parent的方法,如果关闭父页面了,刷新父页面了,请结合layer的延时执行,回调函数

laypage 分页模块
文档配置参数很详细,请仔细研读,切记[挖鼻]
直接说问题和注意点吧:
  • 此模块的配置参数中的一些总页数,如果动态获取的数据的话,请记得写接口返回的参数,
  • 分页切换时,记得重新拉取数据,也就是它的jump方法,在这里实现你的分页切换功能,,说一点小问题,当你的表格数据需要有序号展示时,比如1,2,3...一直到最后一个是你自己定义的,你可能需要处理上下来回切换的序号数字,比如:你一页显示十条数据,总共3页,30条数据,如果第一个表头是序号,你是不是要定义一个num=1,然后在js中在第一个td中num,然后循环后num++,但这样有一个问题,你来回切换时,序号只会一直增加,不会像你想的那样,这个时候请记得用curr这个参数与分页结合,来当处理你的序号。重新拉取数据:在jump中,判断后,再调一个自身的函数就可以了,记得传你的参数:
    //比如你定义了 
    function add(cur,a,b){}
    那么,laypage中的 jump 函数要这样写
    jump: function(){
    if(!first){
    //add(e.curr,a,b);
    }
    }
    不懂的看文档和实例,有的小伙伴有筛选功能的,记得隐藏分页的dom啊,渲染数据时,记得再显示一下,不然切换后,分页就没有了

laytpl 模板引擎
使用步骤:
1.建立模板
<script type="text/html" id="demo">
这里遍历你接口中的数据:不管接口返回的是对象还是数组形式的数据结构
如果有多层的话,一直往下写
</script>
2.建立视图
<ul id="view">      </ul>
3.调接口数据,进行判断是否为空后,渲染数据
//在这里用法中
var getTpl = demo.innerHTML;//这里获取你的模板内容
var view = document.getelementById("view")//获取你的视图容器[思考] :警告:这里只能写原生的获取dom的方法,如果你用$()的方法获取dom,是渲染不出来的,切记,切记
laytpl(getTpl).render(data, function(html){
view.innerHTML = html;
});
模板的功能可能你觉得写的不详细,但你想用就一定要自己多试试,自己可以用json模拟一些复杂的数据,然后接口调用

如果你不懂数据结构,可以好好看看json的数据,结构大部分都是一个大的对象,对象里包含属性:值,而这个值是可以复杂简单的,值可以是数组,数组里可以在包含对象,然后,你懂的,[嘻嘻] ,还有解析xml,跨域咱就不说了[阴险]

layDate 日期选择器
此模板拿来即用,这里只说注意点
  • 像一些日期的限制:注意max,min参数与laydate.now配合使用,做一些判断,
  • 还有多个控件,开始日期,结束日期中需要常用到这3个配合呦,灵活运用啊
  • 日期的回调很实用哦
  • 具体参数,请仔细看文档啊,2.0已经有一个单独模块了,而且变化很大,请仔细研读.[太开心] [吃惊]
[鼓掌] ,[鼓掌] ,[鼓掌] ,[鼓掌] ,[鼓掌]
先吃饭去了,请各位小伙伴,跟帖补充模块用法,....请持续更新,大伙多讨论,带节奏的不要瞎比比了........................[哈哈]
回帖
本帖已设置禁止回复