有一个月没有写博文了,最近经历了离职,找工作,疫情导致的工作延期,新入职在临港的分公司,搬家到临港,所以一直延期博文更新,也没有学习新知识的时间。然后新入职的这家公司项目没有做前后端分离,也就是从后端到页面数据绑定都是后端的活,前端框架使用的是Layui前端框架。这种框架之前没有在公司用到过,也没有接触过所以,这里系统的学习一下。
官方文档给的很全,网站是https://www.layui.com/doc/ 但看着很杂,所以这里我选择容易上手的案例:
由于公司将layui配置好了,官网也有类似的配置教程,这里我就不重复写了。
这里我主要讲一下layui在工作中遇到的一些版本问题
我公司使用的版本是一个比较老的版本,layui-v2.2.5。而且自己在内部封装了一些js和css,对于最新版本的一些模块可能不支持。
这里我已rate评分为例,在2.2.5的版本和2.5.6版本中对比你可以看到
而2.2.5没有该模块。
这种情况下不能更换版本,又要使用rate模块,怎么办呢?
有几种情况可以尝试,第一种,直接手写一个类似的(不太现实);第二种,扩展一个模块;第三种,集成rate模块。这里我使用第三种。
将rate.js中的代码全部复制,然后去layui.js或者layui.all.js中粘贴代码,具体看你引用的是哪个js,我引用的是layui.all.js,所以在layui.all.js最后粘贴rate.js所有的代码
这只是第一步,还有第二步将rate模块引到layui.all.js里加上rate:'modules/rate'
这个时候虽然引入了js但是还有css没有加上,所以第三步我们去2.5.6版本中找layui.css将rate相关的样式加到2.2.5版本的layui.css中,如果不知道怎么替换,你可以先使用2.5.6的版本去页面看效果,然后F12,查看页面样式,直接复制。
到这一步还没结束,你需要将2.2.5版本的font文件夹中的文件替换2.5.6的
一般的这种文件不会有人编辑,所以可以替换 。
总结一下:layui.css加上新版本样式,layui.js或者layui.all.js加上相应的模块,font文件夹替换成最新版本的
实际使用