当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Angular8引入layUI的方法

Angular8引入layUI的方法

2020年07月22日  | 移动技术网IT编程  | 我要评论

最近项目需要引入layui，这里记录下引入遇到的问题。

Angular引入layUI有两种方式，一种是在angular.json中的scripts和styles中分别引入layui.js和layer.css文件。一种是直接在页面中，通过link和script标签引入。

首先layui放在assets目录下：
图1

第一种引入方式：

图2

项目运行会报错
图3

登录页面我用到了layer弹窗，报这个错，后面layui.js都不引入了。解决办法就是缺少什么，在scripts里面就引入什么。
图4

重启项目，发现报的错更多了
图5

这些错，其实都是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的模块
图6

使用时，直接this模块就可以了
图7

类似的，可以在方法里调用table，laypage等
先在头部申明
图8

然后use模块
图9

第二种方式直接在里面引入：

图10

然后组件里使用就可以像上面一样，写个declare var layui，再使用layui.use([‘模块’])，就可以用了。具体使用哪种方式，各自决定，我是觉得第二种更省事，哈哈。

本文地址：https://blog.csdn.net/laipengfei19/article/details/107481136

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网