在HTML中引入angular,Angular8引入layUI的方法

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

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

首先layui放在assets目录下:

3c080b2d520575ead345b2161605b543.png

第一种引入方式:

2322360f6fdf9b3043b2269d79d1e9b3.png

项目运行会报错

366acb61cfdf35b49a06aa9c0a2d0a32.png

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

c76c49bbb381ca517450b7ee3d7a92fb.png

重启项目,发现报的错更多了

b6773611158ef8cdf0085ab4bee940ce.png

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

97afe28bb9e16f50a028ac60e0d2a932.png

使用时,直接this模块就可以了

f27065adf66a030bd557e501e6ebcc0d.png

类似的,可以在方法里调用table,laypage等

先在头部申明

25ecf50fa0cb31f8df031e564618160c.png

然后use模块

96fc4f60abb0177aeaa70412008ffa28.png

第二种方式直接在index.html里面引入:

3238a72d7b0d7cd9950ee8e70c497abe.png

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值