最近项目需要引入layui,这里记录下引入遇到的问题。
Angular引入layUI有两种方式,一种是在angular.json中的scripts和styles中分别引入layui.js和layer.css文件。一种是直接在index.html页面中,通过link和script标签引入。
首先layui放在assets目录下:
第一种引入方式:
项目运行会报错
登录页面我用到了layer弹窗,报这个错,后面layui.js都不引入了。解决办法就是缺少什么,在scripts里面就引入什么。
重启项目,发现报的错更多了
这些错,其实都是404找不到的问题,解决办法就是修改路径。
先在layui.js里面找到lay/ ,然后修改成
/assets/layui/lay/
改好后,这解决了后面两个404的问题,还有第一个找不到layer.css?v=3.1.1,需要修改layer.js:
先找到modules/layer/":“theme/”)+“default/layer.css?v=”+r.v+i;
然后将modules/layer修改成
../assets/layui/css/modules/layer/
OK,现在不再报错了,组件上使用,先引入layui
declare var layui;
再声明个全局变量
layer: any = {};
然后引入layui的模块
使用时,直接this模块就可以了
类似的,可以在方法里调用table,laypage等
先在头部申明
然后use模块
第二种方式直接在index.html里面引入:
然后组件里使用就可以像上面一样,写个declare var layui,再使用layui.use([‘模块’]),就可以用了。具体使用哪种方式,各自决定,我是觉得第二种更省事,哈哈。